Html box border radius

border-radius

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

Синтаксис

Значения

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

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

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

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

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

HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx

Результат данного примера показан на рис. 2.

Рис. 2. Радиусы скругления в браузере Safari

Браузеры

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

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

Источник

border-radius

border-radius — это CSS-свойство, позволяющее разработчикам определять, как скругляются границы блока. Закруглённость каждого угла определяется с помощью одного или двух радиусов, определяя его форму: круг или эллипс.

Интерактивный пример

Скругление применяется ко всему background , даже если элемент не имеет границ, точное положение отсечения определяется свойством background-clip .

Свойство border-radius не применяется к элементам таблицы, когда свойство border-collapse (en-US) имеет значение collapse .

Примечание: Как и с любым другим сокращённым свойством, отдельные подсвойства не могут наследоваться. Например, как в border-radius:0 0 inherit inherit , что будет частично переопределять существующие определения. Вместо этого должны использоваться отдельные длинные свойства.

Синтаксис

/* Такой синтаксис позволяет указать всего одно значение, вместе четырёх */ /* Скругление применяется ко всем четырём углам */ border-radius: 10px; /* top-left-and-bottom-right | top-right-and-bottom-left */ border-radius: 10px 5%; /* top-left | top-right-and-bottom-left | bottom-right */ border-radius: 2px 4px 2px; /* top-left | top-right | bottom-right | bottom-left */ border-radius: 1px 0 3px 4px; /* Синтаксис из двух радиусов также может применяться ко всем четырём углам */ /* (первые значения радиуса) /радиус */ border-radius: 10px 5% / 20px; /* (первые значения радиуса) / top-left-and-bottom-right | top-right-and-bottom-left */ border-radius: 10px 5% / 20px 30px; /* (первые значения радиуса) / top-left | top-right-and-bottom-left | bottom-right */ border-radius: 10px 5px 2em / 20px 25px 30%; /* (первые значения радиуса) / top-left | top-right | bottom-right | bottom-left */ border-radius: 10px 5% / 20px 25em 30px 35em; /* Глобальные значения */ border-radius: inherit; border-radius: initial; border-radius: unset; 

Свойство border-radius может быть задано как:

• одно, два, три или четыре значения или . Используется для задания обычного радиуса углов.
• одна, две, три или четыре пары значений or , разделённые «/». Используется для задания эллиптического скругления.

Значения

Обозначает размер радиуса окружности или две полуоси эллипса. Может быть выражена в любых единицах CSS. Отрицательные значения не принимаются.

Обозначает размер радиуса окружности, или две полуоси эллипса. Проценты по горизонтальной оси относятся к ширине элемента, проценты по вертикальной оси к высоте. Отрицательные значения недействительны.

border-radius: 1em/5em; /* . эквивалентно этому: */ border-top-left-radius: 1em 5em; border-top-right-radius: 1em 5em; border-bottom-right-radius: 1em 5em; border-bottom-left-radius: 1em 5em; 

border-radius: 4px 3px 6px / 2px 4px; /* . эквивалентно этому: */ border-top-left-radius: 4px 2px; border-top-right-radius: 3px 4px; border-bottom-right-radius: 6px 2px; border-bottom-left-radius: 3px 4px; 

Формальный синтаксис

border-radius =
(en-US) (en-US) [ (en-US) / (en-US) (en-US) ] (en-US) ? (en-US)

=
| (en-US)

Примеры

pre id="example-1"> border: solid 10px; border-radius: 10px 40px 40px 10px; pre> pre id="example-2"> border: groove 1em red; border-radius: 2em; pre> pre id="example-3"> background: gold; border: ridge gold; border-radius: 13em/3em; pre> pre id="example-4"> border: none; border-radius: 40px 10px; background: gold; pre> pre id="example-5"> border: none; border-radius: 50%; background: burlywood; pre> pre id="example-6"> border: dotted; border-width: 10px 4px; border-radius: 10px 40px; pre> pre id="example-7"> border: dashed; border-width: 2px 4px; border-radius: 40px; pre> 

pre  margin: 20px; padding: 20px; width: 80%; height: 80px; > pre#example-1  border: solid 10px; border-radius: 10px 40px 40px 10px; > pre#example-2  border: groove 1em red; border-radius: 2em; > pre#example-3  background: gold; border: ridge gold; border-radius: 13em/3em; > pre#example-4  border: none; border-radius: 40px 10px; background: gold; > pre#example-5  border: none; border-radius: 50%; background: burlywood; > pre#example-6  border: dotted; border-width: 10px 4px; border-radius: 10px 40px; > pre#example-7  border: dashed; border-width: 2px 4px; border-radius: 40px; > 

Живые примеры

Спецификации

• border-top-left-radius (en-US): 0
• border-top-right-radius (en-US): 0
• border-bottom-right-radius (en-US): 0
• border-bottom-left-radius (en-US): 0

• border-bottom-left-radius (en-US): две абсолютных length или percentage
• border-bottom-right-radius (en-US): две абсолютных length или percentage
• border-top-left-radius (en-US): две абсолютных length или percentage
• border-top-right-radius (en-US): две абсолютных length или percentage

• border-top-left-radius (en-US): длина, проценты или calc();
• border-top-right-radius (en-US): длина, проценты или calc();
• border-bottom-right-radius (en-US): длина, проценты или calc();
• border-bottom-left-radius (en-US): длина, проценты или calc();

Совместимость с браузерами

BCD tables only load in the browser

Смотрите также

Found a content problem with this page?

This page was last modified on 11 февр. 2023 г. by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник

Создаем закруглённые уголки с помощью CSS 3

Одно из наиболее ожидаемых свойств CSS3, несомненно, свойство border-radius. С помощью свойства border-radius можно создавать, такие популярные в последнее время, прямоугольники с закругленными углами, исключительно средствами CSS, не используя никаких изображений.

Кроссбраузерная совместимость.

К сожалению, CSS3 еще не поддерживается всеми браузерами. Свойство border-radius поддерживается Firefox (начиная с версии 1.0), Safari (с версии 3.1) и Chrome (с самой первой версии), но оно не поддерживается Internet Explorer и Opera (будет реализовано в Opera 10).

Так как CSS3 еще не является стандартом, Вы должны добавлять префикс для свойства border-radius чтобы оно работало в браузерах, которые его поддерживают. Если Вы хотите, чтобы оно работало в Firefox необходимо написать в стилях -moz-border-radius, для Safari/Chrome это свойство будет иметь такой вид — -webkit-border-radius.

Имейте ввиду, что, хотя Firefox, Сафари и Хром поддерживают это свойство, они реализуют его немного различными методами. Я сначала покажу Вам, как оно реализовано Firefox и затем объясню различия в Safari и Chrome.

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

В CSS зададим для него высоту, ширину и цвет фона:
#box width:590px;
height:100px;
background-color:#6B86A6; >

Добавляем свойство border-radius:

Свойство border-radius объявляется подобно свойствам margin и padding. Вы можете использовать как краткую запись этого свойства для всех четырёх углов прямоугольника, так и отдельно для каждого угла. При краткой записи указывается одно значение для каждого угла:
#box -moz-border-radius: 20px;
>

Теперь все четыре угла будут иметь радиус 20px:

Вы также можете указать два значения, первое из которых будет определять радиус для верхнего левого и нижнего правого угла, а второе — для верхнего правого и нижнего левого:
#box -moz-border-radius:20px 40px;
>

Если Вы указываете три или четыре значения, они будут применяться в следующем порядке — верхний левый угол, верхний правый угол, нижний правый угол и нижний левый угол.
#box -moz-border-radius:10px 20px 30px 40px;
>

Объявляем свойство border-radius для каждого угла

Если вы хотите использовать это свойство только для одного угла, то достаточно добавить соответствующее окончание к свойству:

• moz-border-radius-topleft для верхнего левого угла;
• moz-border-radius-topright для верхнего правго угла;
• moz-border-radius-bottomright для нижнего правого угла;
• moz-border-radius-bottomleft для нижнего левого угла;

Горизонтальный и вертикальный радиус

Это свойство можно также использовать для создания углов в виде четверти эллипса. Для этого необходимо добавить второе значение для нужного угла:
#box -moz-border-radius-topleft: 30px 15px;
>

Как Вы можете видеть на картинке верхний левый угол имеет немного «скошенный» вид. Это потому что эти два значения определяют горизонтальный и вертикальный радиус соответственно. Когда используется одно значение браузер интерпретирует его как для горизонтального, так и для вертикального радиуса.

При краткой записи этого свойства значения для горизонтального и вертикального радиуса разделяются слэшем:
#box -moz-border-radius: 30px / 15px;
>
#box -moz-border-radius: 10px 20px 30px 40px / 5px 10px 15px 20px;
>

Использование свойства border-radius в Safari и Chrome.

• -webkit-border-top-left-radius для верхнего левого угла;
• -webkit-border-top-right-radius для верхнего правого угла;
• -webkit-border-bottom-right-radius для нижнего правого угла;
• -webkit-border-bottom-left-radius для нижнего левого угла;

Этот код не будет работать в Safari и Chrome:
#box -webkit-border-radius: 10px 20px 30px 40px;
>

Правильный код будет выглядеть так:
#box -webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 20px;
-webkit-border-bottom-right-radius: 30px;
-webkit-border-bottom-left-radius: 40px;
>

Горизонтальный и вертикальный радиус в Safari и Chrome.

В Safari и Chrome можно также указывать горизонтальный и вертикальный радиус:
#box -webkit-border-top-left-radius: 30px 15px;
>

При краткой записи можно указывать горизонтальный и вертикальный радиус для всех углов прямоугольника только если эти значения одинаковые для каждого угла. Также не требуется использование слэша:
#box -webkit-border-radius: 30px 15px;
>

Источник