border-radius

Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
9.0+	1.0+	10.5+	3.0+	1.0+	2.1+	1.0+

Краткая информация

Значение по умолчанию	0
Наследуется	Нет
Процентная запись	Да, относительно ширины блока
Применяется	Ко всем элементам, за исключением таблиц с border-collapse: collapse
Ссылка на спецификацию	http://www.w3.org/TR/css3-background/#the-border-radius

Версии CSS

CSS 1	CSS 2	CSS 2.1	CSS 3

Описание

Устанавливает радиус скругления уголков рамки. Если рамка не задана, то скругление также происходит и с фоном.

Свойство border-radius закругляет все четыре угла элемента. Могут быть использованы положительные значения чисел, а так же процентные соотношения записанные через пробел. Так же можно задать значения для угла с элипсом, для этого значения указываются разделяясь слэшем ( / ), где первое значение соответствует оси x (горизонтали), а второе оси y (вертикали). Существует возможность указания от одного до восьми значений, имеется в виду запись для круглых углов до 4 значений, для эллипсных до 8.

Описание вариантов с числом равным 10px:

1. border-radius:10px; - закругляем все 4 угла;
2. border-radius:10px/10px; - эллипсуем все 4 угла;
3. border-radius:10px 10px; - закругляем первым значением верхний левый и нижний правый угол, вторым верхний правый и нижний левый углы (по диагонали);
4. border-radius:10px/10px 10px/10px; - эллипсуем первым значением верхний левый и нижний правый угол, вторым верхний правый и нижний левый углы (по диагонали);
5. border-radius:10px 10px 10px; - закругляем первым значением верхний левый угол, вторым одновременно верхний правый и нижний левый углы (по диагонали), третьим нижний правый угол;
6. border-radius:10px/10px 10px/10px 10px/10px; - эллипсуем первым значением верхний левый угол, вторым одновременно верхний правый и нижний левый углы (по диагонали), третьим нижний правый угол;
7. border-radius:10px 10px 10px 10px; - закругляем первым значением верхний левый угол, вторым верхний правый, третьим нижний правый, четвёртым нижний левый угол (по часовой стрелке);
8. border-radius:10px/10px 10px/10px 10px/10px 10px/10px; - эллипсуем первым значением верхний левый угол, вторым верхний правый, третьим нижний правый, четвёртым нижний левый угол (по часовой стрелке).

Свойство применимо к элементам кроме элементов таблицы, у которых свойство border-collapse сопровождается значением collapse, создано в версии CSS3 и проходит валидацию согласно версии CSS3.

Синтаксис

border-radius: <радиус>{1,4} [ / <радиус>{1,4}]

Значения

Разрешается использовать одно, два, три или четыре значения, перечисляя их через пробел (табл. 1). Также допустимо писать два значения через слэш (/). В качестве значений указываются числа в любом допустимом для CSS формате. В случае применения процентов, отсчет ведется относительно ширины блока.

Табл. 1. Зависимость от числа значений
Число значений	Результат
1	Радиус указывается для всех четырех уголков.
2	Первое значение задает радиус верхнего левого и нижнего правого уголка, второе значение — верхнего правого и нижнего левого уголка.
3	Первое значение задает радиус для верхнего левого уголка, второе - одновременно для верхнего правого и нижнего левого, а третье - для нижнего правого уголка.
4	По очереди устанавливает радиус для верхнего левого, верхнего правого, нижнего правого и нижнего левого уголка.

В случае задания двух параметров через слэш, то первый задает радиус по горизонтали, а второй по вертикали (эллиптические уголки). На рис. показана разница между обычным скругленным уголком и эллиптическим уголком.

Рис. Радиус скругления для создания разных типов уголков

Дополнительные свойства применяемые к border-radius

Свойство	Описание
border-top-left-radius	Указывает верхний левый угол
border-top-right-radius	Указывает верхний правый угол
border-bottom-right-radius	Указывает нижний правый угол
border-bottom-left-radius	Указывает нижний левый угол
-webkit-border-top-left-radius	Альтернативное свойство Safari и Chrome для свойства border-top-left-radius
-webkit-border-top-right-radius	Альтернативное свойство Safari и Chrome для свойства border-top-right-radius
-webkit-border-bottom-right-radius	Альтернативное свойство Safari и Chrome для свойства border-bottom-right-radius
-webkit-border-bottom-left-radius	Альтернативное свойство Safari и Chrome для свойства border-bottom-left-radius
-moz-border-radius-topleft	Альтернативное свойство Mozila для свойства border-top-left-radius
-moz-border-radius-topright	Альтернативное свойство Mozila для свойства border-top-right-radius
-moz-border-radius-bottomright	Альтернативное свойство Mozila для свойства border-bottom-right-radius
-moz-border-radius-bottomleft	Альтернативное свойство Mozila для свойства border-bottom-left-radius

Дополнительные значения применяемые к border-radius

Значение	Описание
<Число>	Любое положительное число
<Процент>	Значение в процентах

Пример

HTML5CSS2.1CSS3IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title>border-radius</title>
 <style>
 .radius {
 background: #f0f0f0; /* Цвет фона */
 border: 2px solid black; /* Параметры рамки */
 padding: 15px; /* Поля вокруг текста */
 margin-bottom: 10px; /* Отступ снизу */
 }
 </style>
 </head> 
 <body> 
 <div style="border-radius: 50px 0 0 50px;" class="radius">
 border-radius: 50px 0 0 50px;
 </div>
 <div style="border-radius: 40px 10px" class="radius">
 border-radius: 40px 10px;
 </div>
 <div style="border-radius: 10em/1em;" class="radius">
 border-radius: 13em/3em;
 </div>
 <div style="border-radius: 13em 0.5em/1em 0.5em;" class="radius">
 border-radius: 13em 0.5em/1em 0.5em;
 </div>
 <div style="border-radius: 8px;" class="radius">
 border-radius: 8px;
 </div>
 </body> 
</html>

Пример в действии

border-radius: 50px 0 0 50px;

border-radius: 40px 10px;

border-radius: 13em/3em;

border-radius: 13em 0.5em/1em 0.5em;

border-radius: 8px;

Браузеры

Chrome до версии 4.0, Safari до версии 5.0, iOS используют нестандартное свойство -webkit-border-radius.

Firefox до версии 4.0 использует нестандартное свойство -moz-border-radius.

Источники: http://htmlbook.ru/ и http://delaisait.ucoz.ru/

Поделись ссылкой на эту страницу с друзьями:

Категория: Углы | Добавил: evkuriy (05.07.2013)

Просмотров: 1282 | Рейтинг: 0.0/0

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]

border-radius

Краткая информация

Версии CSS

Описание

Синтаксис

Значения

Дополнительные свойства применяемые к border-radius

Свойство

Описание

Дополнительные значения применяемые к border-radius

Значение

Описание

Пример

Пример в действии

Браузеры