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	CSS3+
Значение по умолчанию	0
Наследуется	Нет
Процентная запись	Да, относительно ширины блока
Применяется	Ко всем элементам, за исключением таблиц с border-collapse: collapse
Ссылка на спецификацию	открыть в новой вкладке

Описание

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

Синтаксис

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

Аргументы

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

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

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

В случае задания двух параметров через слэш, то первый задает радиус по горизонтали, а второй по вертикали (эллиптические уголки). На рис. 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>border-radius</title>

      <style type="text/css">

.radius {

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

border: 1px 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>

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

Примечание

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

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

border-radius

Категории

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

	Русский
	English