Главная » Статьи » CSS таблицы стилей » Скругление углов при помощи CSS

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

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

border-radius: 5px;

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

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

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

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

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

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 поддерживают не все браузеры. Однако для некоторых браузеров имеются свои аналогичные свойства.

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

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

Что же касается IE, то наиболее приемлемое на данный момент решение в css3pie.

Источник 

Write a comment

  • Required fields are marked with *.

If you have trouble reading the code, click on the code itself to generate a new random code.
 
 
Рейтинг@Mail.ru Rambler's Top100
Новостройка без чистовой отделки. Новостройки с отделкой .