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