Свойство 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

Источник

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.