Border-radius CSS свойство - закругленные углы

border-radius CSS
border-radius: 5px;

Такой вот короткой записью мы добавили скругление углов на 5px с каждой стороны блока. Эта запись равнозначна более сложно, описывающей каждую из сторон по отдельности...

Для каждой стороны

  • border-top-left-radius: 10px; // левый верхний угол
  • border-top-right-radius: 10px; // правый верхний угол
  • border-bottom-right-radius: 10px; // правый нижний угол
  • border-bottom-left-radius: 10px; // левый нижний угол

Можно записать более коротко, зная последовательность указания значений...

Запишем коротко

border-radius: 5px 5px 10px 10px;

Данная запись более короткая, хотя и описывает каждую из сторон в отдельности.

Для кроссбраузерности, по традиции пишем префиксы...

Кроссбраузерный border-radius

  • -webkit-border-radius: 10px;
  • -moz-border-radius: 10px;

Генератор border-radius

По ситуации, можно воспользоваться генератором border-radius. Указываем значение для каждой стороны, сразу видим результат и получаем на выходе готовый кроссбраузерный код. Единственный минус - слишком громоздкий код получается.

Есть еще интересный ресурс, на котором также есть генератор border-radius. Понятный и удобный интерфейс, на выходе получаем сокращенный кроссбраузерный код. Можно пользоваться. Рекомендую полазить по сайту, тут собраны генераторы наиболее востребованных CSS3 свойств: border-radius, gradient и box-shadow.

Дополнение к основному материалу

Недавно прочитал на хабре о новой возможности свойства border-radius - создавать несимметрично изогнутые углы. Параметры указываются через слэш:

15px 17px 8px 12px / 32px 15px 7px 9px

Числа, указанные до слэша задают степень изгиба по горизонтали, а после - вертикали. Эффект получается довольно интересный (пример), но подобные задачи встречаются только избранным.