Закруглённые края у div

04.03.2012
Одно из самых простых и полезных свойств в CSS3 это border-radius. С помощью него, можно закруглить края у элементов, в частности у div.

Синтаксис


Синтаксис у этого свойства следующий:
border-radius: X;
где X - радиус закругления. Измеряемый в пикселях.
Например:
border-radius: 4px;
Это самая простая запись. Так же можно записывать с двумя, тремя и четыремя параметрами. Первые два рассматривать не будем, а с четыремя рассмотрим поподробнее:
border-radius: X1 X2 X3 X4;
Где X1 радиус левого верхнего угла, а остальные идут по часовой стрелке, т.е. X2 - радиус правого верхнего угла и т.д.
Например:
border-radius: 4px 0 4px 0;

В данном случае мы закруглили левый верхний и правый нижний углы.

Овальное закругление


Для овального закругления, необходимо через слэш параметры.
Для записи с четыремя параметрами, это будет выглядеть так:
border-radius: 4px 0 4px 0 / 2px 0 2px 0;
Параметры до слэша, это радиус по горизонтали, а после - по вертикали.
Для записи с одним:
border-radius: 4px/2px;