Закругление углов при помощи 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 */
}
