Border-radius

Border-radius — это свойство, добавляющее элементам скругление углов.

Скругление можно задать для всего элемента сразу:

border-radius: 10px;

или разным углам поотдельности, например:

border-top-left-radius: 25px;
border-top-right-radius: 50%;

Возможные значения: числа или проценты.

Если задать два значения, первое будет отвечать за верхний левый и нижний правый углы, а второе — за верхний правый и нижний левый:

Значения, заданные через /, определяют горизонтальные и вертикальные радиусы:

Таким образом можно задать разные горизонтальные и вертикальные радиусы как для всей фигуры сразу, так и для отдельных углов:

Экспериментируя с радиусами можно сделать, например, яйцо, каплю или лимон:

Или вот такую штуку:

А можно мячик : )

Или облака:

Или цветок, или ещё какую-нибудь чепуху:

Не думаю, что имеет смысл вот так вот рисовать Css-ом, но примеры показывают, что с помощью фантазии и небольшого количества кода можно сделать много интересного.

Статья вдохновлена презентацией про border-radius от Lea Verou

Спецификация: w3.org/TR/css3-background/#the-border-radius