Проблема CSS3 с граничным верхом и граничным радиусом

Question

Я смотрю на добавление граничной вершины, 20px solid red;, и я хочу, чтобы нижняя часть этого была закруглена. Со следующим, похоже, это работает для меня.

-moz-border-radius-bottomright: 12px 12px; 
    border-bottom-right-radius: 12px 12px; 
    -moz-border-radius-bottomleft: 12px 12px; 
    border-bottom-left-radius: 12px 12px; 

Как я могу это сделать?

Answer 1

Я не уверен, почему вы не можете произвести результат, но приведенный выше код выглядит правильно. Я представил пример JS Fiddle, и мои работы. Я предполагаю, что вы добавили свойство border-top в поле. Я не думаю, что вам нужно два значения для каждой граничной собственности. Надеюсь это поможет.

Создайте новый объект слоя с идентификатором поля и примените следующий CSS. Если вы добавите абзац в поле, граница не появится.

http://jsfiddle.net/brownlace/kEvrE/1/embedded/result/

/* css3 rounded corners */ 

#box { 
border-top: 20px solid red; 
border-bottom-right-radius: 20px; 
border-bottom-left-radius: 20px; 
-moz-border-radius-bottomright: 20px; 
-moz-border-radius-bottomleft: 20px; 
} 

Answer 2

Я предлагаю вам использовать border вместо border-top, чтобы убедиться, что свойство применяется ко всем границам.

border: 20px solid red; 

В этом случае вы можете использовать border-bottom-left-radius: 12px; с одним значением, потому что они одинаковы.

Также вы можете добавить свойство поставщика для WebKit:

-webkit-border-bottom-right-radius: 12px; 
-webkit-border-bottom-left-radius: 12px; 

Here является скрипкой.