border-radius

Базовая Широко доступная

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна во всех браузерах с июля 2015 года.

Свойство border-radius CSS сглаживает углы внешнего края границы элемента. Вы можете установить один радиус для создания круглых углов или два радиуса для создания эллиптических углов.

Попробовать

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

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

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

Составляющие свойства

Это свойство является сокращением для следующих свойств CSS:

Синтаксис

/* The syntax of the first radius allows one to four values */
/* Radius is set for all 4 sides */
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;

/* The syntax of the second radius allows one to four values */
/* (first radius values) / radius */
border-radius: 10px / 20px;

/* (first radius values) / top-left-and-bottom-right | top-right-and-bottom-left */
border-radius: 10px 5% / 20px 30px;

/* (first radius values) / top-left | top-right-and-bottom-left | bottom-right */
border-radius: 10px 5px 2em / 20px 25px 30%;

/* (first radius values) / top-left | top-right | bottom-right | bottom-left */
border-radius: 10px 5% / 20px 25em 30px 35em;

/* Global values */
border-radius: inherit;
border-radius: initial;
border-radius: revert;
border-radius: revert-layer;
border-radius: unset;

Свойство border-radius задаётся как:

одно, два, три или четыре значения <length> или <percentage>. Это используется для установки одного радиуса для углов.
необязательно после «/» одно, два, три или четыре значения <length> или <percentage> . Это используется для установки дополнительного радиуса, позволяющего создавать эллиптические углы.

Значения

A light blue rectangle with a light gray border. All 4 corners are rounded.

A light blue rectangle with a light gray border. The 2 corners on the top left and the bottom right have are rounded.

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

Например:

border-radius: 1em/5em;

/* It is equivalent to: */
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;

/* It is equivalent to: */
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-top-left-radius`: `0` `border-top-right-radius`: `0` `border-bottom-right-radius`: `0` `border-bottom-left-radius`: `0`
Применяется к	всем элементам; но агенты пользователей не обязаны применять к элементам `table` и `inline-table`, когда `border-collapse` имеет значение `collapse`. Поведение на внутренних элементах таблицы на данный момент не определено. Также применяется к `::first-letter`.
Наследуется	нет
Проценты	относятся к соответствующему размеру области границы
Вычисленное значение	как каждое из свойств сокращения: `border-bottom-left-radius`: два абсолютных значения `<length>` или `<percentage>` `border-bottom-right-radius`: два абсолютных значения `<length>` или `<percentage>` `border-top-left-radius`: два абсолютных значения `<length>` или `<percentage>` `border-top-right-radius`: два абсолютных значения `<length>` или `<percentage>`
Тип анимации	как каждое из свойств сокращения: `border-top-left-radius`: длина, процент или calc(); `border-top-right-radius`: длина, процент или calc(); `border-bottom-right-radius`: длина, процент или calc(); `border-bottom-left-radius`: длина, процент или calc();

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

border-radius = 
  <length-percentage [0,∞]>{1,4} [ / <length-percentage [0,∞]>{1,4} ]?  

<length-percentage> = 
  <length>      |
  <percentage>

Примеры

Примеры с живыми данными

Пример 1 : https://jsfiddle.net/Tripad/qnGKj/2/
Пример 2 : https://jsfiddle.net/Tripad/qnGKj/3/
Пример 3 : https://jsfiddle.net/Tripad/qnGKj/4/
Пример 4 : https://jsfiddle.net/Tripad/qnGKj/5/
Пример 5 : https://jsfiddle.net/Tripad/qnGKj/6/

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

Спецификация
CSS Backgrounds and Borders Module Level 3 # border-radius

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

	Рабочий стол					Мобильное устройство
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`4_values_for_4_corners`	4	12	4	10.5	5	18	4	11	4.2	1.0	4.4
`border-radius`	4 Chrome игнорирует `border-radius` на `<select>` элементах, если `-webkit-appearance` не переопределён на соответствующее значение. 1	1212	4 ["Перед Firefox 50, стили границ с закруглёнными углами (с `border-radius`) всегда отображались так, как будто `border-style` было `solid`. Это исправлено в Firefox 50.", "Для соответствия стандарту CSS3, Firefox 4 изменяет обработку значений `<percentage>` для соответствия спецификации. Вы можете указать эллипс как границу произвольного элемента с помощью `border-radius: 50%;`. Firefox 4 также обрезает содержимое и изображения при закруглённых углах, если `overflow: visible` не задано."] 1–12	10.5 Перед Opera 11.60, заменённые элементы с `border-radius` не имели закруглённых углов.	5 Safari игнорирует `border-radius` на `<select>` элементах, если `-webkit-appearance` не переопределён на соответствующее значение. 3	18	4 Перед Firefox 50, стили границ с закруглёнными углами (с `border-radius`) всегда отображались так, как будто `border-style` было `solid`. Это исправлено в Firefox 50. 4–14	11	4.2 Safari игнорирует `border-radius` на `<select>` элементах, если `-webkit-appearance` не переопределён на соответствующее значение. 1	1.0	≤4.42
`elliptical_borders`	1 Перед Chrome 4, нотация с косой чертой `/` не поддерживалась. Если указаны два значения, то эллиптическая граница рисуется на всех четырёх углах. `-webkit-border-radius: 40px 10px;` эквивалентно `border-radius: 40px / 10px;`.	12	4	10.5	3 Перед Safari 5, нотация с косой чертой `/` не поддерживалась. Если указаны два значения, то эллиптическая граница рисуется на всех четырёх углах. `-webkit-border-radius: 40px 10px;` эквивалентно `border-radius: 40px / 10px;`.	18	4	11	4.2	1.0	4.4
`percentages`	8	12	4 Перед Firefox 4, значения `<percentage>` реализованы нестандартным способом. И горизонтальный, и вертикальный радиусы были относительны к ширине области границы.	11.5 Перед Opera 11.5, реализация значений `<percentage>` была ошибочной.	5.1	18	4	11.5	5	1.0	4.4

См. также

Свойства CSS, связанные с border-radius: border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius, border-start-start-radius, border-start-end-radius, border-end-start-radius, border-end-end-radius

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius

radius		Это `<length>` или `<percentage>`, определяющие радиус, используемый для границы в каждом углу границы. Используется только в синтаксисе с одним значением.
top-left-and-bottom-right		Это `<length>` или `<percentage>`, определяющие радиус, используемый для границы в верхнем левом и нижнем правом углах элемента. Используется только в синтаксисе с двумя значениями.
top-right-and-bottom-left		Это `<length>` или `<percentage>`, определяющие радиус, используемый для границы в верхнем правом и нижнем левом углах элемента. Используется только в синтаксисе с двумя и тремя значениями.
top-left		Это `<length>` или `<percentage>`, определяющие радиус, используемый для границы в верхнем левом углу элемента. Используется только в синтаксисе с тремя и четырьмя значениями.
top-right		Это `<length>` или `<percentage>`, определяющие радиус, используемый для границы в верхнем правом углу элемента. Используется только в синтаксисе с четырьмя значениями.
bottom-right		Это `<length>` или `<percentage>`, определяющие радиус, используемый для границы в нижнем правом углу элемента. Используется только в синтаксисе с тремя и четырьмя значениями.
bottom-left		Это `<length>` или `<percentage>`, определяющие радиус, используемый для границы в нижнем левом углу элемента. Используется только в синтаксисе с четырьмя значениями.