-webkit-border-radius

Браузер	Internet Explorer				Chrome				Opera				Safari				Firefox
Версия	6.0	7.0	8.0	9.0	2.0	3.0	4.0	5.0	9.2	9.6	10	10.5	2.0	3.1	4.0	5.0	2.0	3.0	3.6	4.0
Поддержка

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

CSS	-
Значение по умолчанию	0
Наследуется	Нет
Процентная запись	Неприменима
Применяется	Ко всем элементам, за исключением таблиц с border-collapse: collapse

Описание

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

Синтаксис

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

Аргументы

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

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

Табл. 1. Зависимость от числа значений

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

Пример

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">



      <html>

      <head>

      <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

      <title>-webkit-border-radius</title>

      <style type="text/css">

.radius {

background: #fc0; /* Цвет фона */

padding: 15px; /* Поля вокруг текста */

margin-bottom: 10px; /* Отступ снизу */

}

</style>

</head>

<body>

 <div style="-webkit-border-radius: 50px 0 0 50px;" class="radius">

-webkit-border-radius: 50px 0 0 50px;

 </div>

 <div style="-webkit-border-radius: 40px 10px" class="radius">

-webkit-border-radius: 40px 10px;

 </div>

 <div style="-webkit-border-radius: 10em/1em;" class="radius">

-webkit-border-radius: 13em/3em;

 </div>

 <div style="-webkit-border-radius: 13em 0.5em/1em 0.5em; border: 2px solid black;" class="radius">

-webkit-border-radius: 13em 0.5em/1em 0.5em; border: 2px solid black;

 </div>

 <div style="-webkit-border-radius: 8px; border: 1px solid black;" class="radius">

-webkit-border-radius: 8px; border: 1px solid black;

 </div>

</body>

</html>

Демонстрация примера

Примечание

-webkit-border-radius нестандартное свойство и поддерживается только браузером Chrome и Safari начиная с версии 3.0.

-webkit-border-radius не применяется к таблицам, у которых свойство border-collapse задано как collapse.

Safari до версии 4.0 включительно не понимает синтаксис со слэшем, эллиптическая рамка рисуются для всех четырех углов, если указано два значения через пробел.

-webkit-border-radius

Категории

Последние комментарии

	Русский
	English