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

Ссылки по теме:
Css-фигуры
Если вы нашли ошибку или неточность, вы можете отредактировать статью с помощью prose.io, а также можно написать мне в комментариях или в Twitter.
Система комментирования от Disqus