Все ленты — последние статьи

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

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

Синтаксис


Синтаксис у этого свойства следующий:

1
border-radius: X;

где X — радиус закругления. Измеряемый в пикселях.
Например:

1
border-radius: 4px;

 

Это самая простая запись. Так же можно записывать с двумя, тремя и четыремя параметрами. Первые два рассматривать не будем, а с четыремя рассмотрим поподробнее:

1
border-radius: X1 X2 X3 X4;

Где X1 радиус левого верхнего угла, а остальные идут по часовой стрелке, т.е. X2 — радиус правого верхнего угла и т.д.
Например:

1
border-radius: 4px 0 4px 0;


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

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


Для овального закругления, необходимо через слэш параметры.
Для записи с четыремя параметрами, это будет выглядеть так:

1
border-radius: 4px 0 4px 0 / 2px 0 2px 0;

Параметры до слэша, это радиус по горизонтали, а после — по вертикали.
Для записи с одним:

1
border-radius: 4px/2px;