Просмотров: 790

Свойство border-radius

Возможные значения: [<размер> | <проценты> ]

Значение по умолчанию: 0

Применяется: ко всем элементам, за исключением таблиц с border-collapse: collapse

Наследуется: нет

Проценты считаются относительно ширины блока.

Добавляет скругленные углы для элементов на странице.

<div style="width:150px; height:150px; background:#FC0; border-radius:10px; text-align:center">Блок 1</div>

border-radius

При указании одного значения, радиус закругления одинаков для всех сторон.

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

<div style="width:150px; height:150px; background:#FC0; border-radius:10px 30px; text-align:center">Блок 1</div>

31-03-2013 17-53-31

Если задавать три значения:

Первое — для верхнего левого угла

второе — одновременно для верхнего правого и нижнего левого,

третье — для нижнего правого угла

<div style="width:150px; height:150px; background:#FC0; border-radius:10px 30px 50px; text-align:center">Блок 1</div>

31-03-2013 17-57-46

При указании четырех значений, углы скругления задаются для всех сторон по очереди.

<div style="width:150px; height:150px; background:#FC0; border-radius:10px 30px 50px 70px; text-align:center">Блок 1</div>

31-03-2013 18-00-02

Если нужно закруглить границы по эллипсу, то возможно указание значения через знак «/».

<div style="width:150px; height:150px; background:#FC0; border-radius:10px/30px; text-align:center">Блок 1</div>

31-03-2013 18-05-34