Site icon Vavik96

Закругление углов при помощи CSS

Справочник свойств CSS

Справочник свойств CSS

CSS-свойство border-radius позволяет закруглять углы любого блока. Блок может быть с бордером, либо фоновым рисунком — в любому случае border-radius сделает вам круглые углы без дополнительных рисунков, как это делалось раньше. Рассмотрим как его правильно использовать.

Свойство border-radius имеет несколько вариантов записи. Самый простой вариант — указывание одного радиуса скругления.

CSS

border-radius: 5px;

Указанный радиус будет применен ко всем четырем углам блока.

Можно задать свой радиусы скругления для каждого угла:

CSS

border-radius: 5px 4px 3px 6px;

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

Если же вы хотите контролировать радиус скруглений каждого угла в отдельности, то допускаются и так называемые «longhand» свойства:

CSS

border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;

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

 

 

 

 

 

 

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

 

 

 

 

На верхнем рисунке толщина границы больше радиуса скруглений. в результате внутри мы имеем прямой угол. На нижнем же рисунке, толщина границы больше border-radius на 20 пикселей. в результате радиус внутренней дуги границы равен 20px.

Стоит также отметить, что border-radius успешно работает и в случае если задан фоновый рисунок (либо цвет) для блока. В этом случае углы будут закругленны даже если отсутствует border.

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

CSS

.class {
border-radius: 10px;  /* свойство для тех кто его поддерживает */
-moz-border-radius: 10px;  /* для firefox */
-webkit-border-radius: 10px;  /* для Safari и Chrome */
}

Работают они аналогично стандартному border-radius.

htmlworld.ru

Exit mobile version