Как я могу использовать скругленные границы с CSS?

Question

Есть ли способ в новых стандартах CSS обеспечить круглые границы?Это невозможно на уровне CSS 2.

Answer 1

Да.У CSS3 он уже есть.

У многих браузеров он уже есть.

• В браузерах Mozilla / Gecko вам нужно -moz-border-radius, хотя они переходят на border-radius.
• IE9 и выше необходимо border-radius (IE8 и ниже вообще не поддерживают).
• В будущем, когдаCSS3 широко распространен, вам просто нужно border-radius во всех браузерах.

В настоящее время неплохо использовать все три, плюс -o-border-radius, если вы беспокоитесь об Opera.

Answer 2

Это в CSS 3.

border-radius: 4em;

http://www.w3.org/TR/css3-background/#the-border-radius

Answer 3

Что Томас Раттер сказал , плюс здесь есть удобный ресурс , потому что WebKit и Gecko используют разные свойства для таких вещей, как top-left.

Answer 4

Граница-радиус: создать закругленные углы с помощью CSS!

Это поле должно иметь закругленные углы для Firefox, Safari / Chrome, Opera и IE9. Код для этого примера, теоретически, довольно прост:

#example1 {
border-radius: 15px;
}

Однако на данный момент вам также необходимо использовать префикс -moz- для поддержки Firefox (дополнительную информацию см. В разделе о поддержке браузера в этой статье):

#example1 {
-moz-border-radius: 15px;
border-radius: 15px;
}