Border-radius CSS - закругленные углы

border-radius CSS

До появления CSS3, сделать тупые углы у блока было не так то просто. Требовало множить картинки для каждого угла и это еще не самое страшное. Если нужно было чутка изменить цвет у блока, то и картинки требовалось подгонять. Муторное занятие, в общем. Но теперь все решается легко и просто, одной строкой кода, на радость начинающим верстальщикам.

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 - создавать несимметрично изогнутые углы. Параметры указываются через слэш:

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

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