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

Это свойство является короткой записью для четырёх свойств border-top-left-radius, border-top-right-radius, border-bottom-right-radius иborder-bottom-left-radius.

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

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

Замечание: Как и при любой другой короткой записи свойств, разрешается задавать значение inherit, например, 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 может быть задано как:

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

Значения

radius all-corner.png <length> или <percentage> устанавливает радиус скругления для всех углов элемента. Может быть указано только одно значение (или одна пара).
top-left-and-bottom-right top-left-bottom-right.png <length> или <percentage> уставливает радиус для верхнего левого и нижного правого угла элемента. Следует использовать синтаксис с двумя значениями.
top-right-and-bottom-left top-right-bottom-left.png <length> или <percentage> устанавливает радиус для верхнего правого и нижнего левого угла элемента. Можно использовать синтаксис с двумя или тремя значениями.
top-left top-left.png <length> или <percentage> устанавливает радиус для левого верхнего угла элемента. Можно использовать синтаксис с тремя и четырьмя значениями.
top-right top-right.png <length> или <percentage> уставливает радиус для верхнего правого угла элемента. Следует использовать синтаксис с четырьмя значениями.
bottom-right bottom-rigth.png <length> или <percentage> уставливает радиус для нижнего правого угла элемента. Можно использовать синтаксис с тремя и четырьмя значениями.
bottom-left bottom-left.png <length> или <percentage> устанавливает радиус для нижнего левого угла элемента. Следует использовать синтаксис с четырьмя значениями.
<length>
Обозначает размер радиуса окружности или две полуоси эллипса. Может быть выражена в любых единицах CSS. Отрицательные значения не принимаются.
<percentage>
Обозначает размер радиуса окружности, или две полуоси эллипса. Проценты по горизонтальной оси относятся к ширине элемента, проценты по вертикальной оси к высоте. Отрицательные значения недействительны.

Например:

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;

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

<length-percentage>{1,4} [ / <length-percentage>{1,4} ]?

где
<length-percentage> = <length> | <percentage>

Примеры

  border: solid 10px;
  /* угол изгибается в виде 'D' */
  border-radius: 10px 40px 40px 10px;
  border: groove 1em red;
  border-radius: 2em;
  background: gold;
  border: ridge gold;
  border-radius: 13em/3em;
  border: none;
  border-radius: 40px 10px;
  border: none;
  border-radius: 50%;
  border: dotted;
  border-width: 10px 4px;
  border-radius: 10px 40px;
  border: dashed;
  border-width: 2px 4px;
  border-radius: 40px;

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

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

Спецификация Статус Комментарий
CSS Backgrounds and Borders Module Level 3
Определение 'border-radius' в этой спецификации.
Кандидат в рекомендации Изначальное определение

Начальное значениекак и у каждого из подсвойств этого свойства:
Применяется квсе элементы, но браузеры не применяют к элементам table и inline-table, когда border-collapse:collapse. Поведение на внутритабличных элементах не определено.. Это также применяется к ::first-letter.
Наследуетсянет
Процентыотносятся к соответствующему размеру границы элемента
Отображениевизуальный
Обработка значениякак и у каждого из подсвойств этого свойства:
Animation typeкак и у каждого из подсвойств этого свойства:
Канонический порядокуникальный неоднозначный порядок, определённый формальной грамматикой

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

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidEdge MobileFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
border-radiusChrome Полная поддержка 4
Замечания
Полная поддержка 4
Замечания
Замечания Current Chrome and Safari versions ignore border-radius on <select> elements unless -webkit-appearance is overridden to an appropriate value.
Полная поддержка 1
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Edge Полная поддержка 12
Полная поддержка 12
Полная поддержка 12
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Firefox Полная поддержка 4
Замечания
Полная поддержка 4
Замечания
Замечания Prior to Firefox 50, border styles of rounded corners (with border-radius) were always rendered as if border-style was solid. This has been fixed in Firefox 50.
Замечания To conform to the CSS3 standard, Firefox 4 changes the handling of <percentage> values to match the specification. You can specify an ellipse as a border on an arbitrary sized element with border-radius: 50%;. Firefox 4 also makes rounded corners clip content and images if overflow: visible is not set.
Нет поддержки 1 — 12
С префиксом
С префиксом Требует вендорный префикс: -moz-
IE Полная поддержка 9Opera Полная поддержка 10.5
Замечания
Полная поддержка 10.5
Замечания
Замечания In Opera prior to version 11.60, replaced elements with border-radius will not have rounded corners.
Safari Полная поддержка 5
Замечания
Полная поддержка 5
Замечания
Замечания Current Chrome and Safari versions ignore border-radius on <select> elements unless -webkit-appearance is overridden to an appropriate value.
Полная поддержка 3
С префиксом
С префиксом Требует вендорный префикс: -webkit-
WebView Android Полная поддержка 2
С префиксом
Полная поддержка 2
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Chrome Android Полная поддержка ДаEdge Mobile Полная поддержка Да
Полная поддержка Да
Полная поддержка Да
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Firefox Android Полная поддержка 4
Замечания
Полная поддержка 4
Замечания
Замечания Prior to Firefox 50, border styles of rounded corners (with border-radius) were always rendered as if border-style was solid. This has been fixed in Firefox 50.
Нет поддержки 4 — 14
С префиксом
С префиксом Требует вендорный префикс: -moz-
Opera Android Полная поддержка Safari iOS Полная поддержка ДаSamsung Internet Android Полная поддержка Да
Elliptical bordersChrome Полная поддержка Да
Замечания
Полная поддержка Да
Замечания
Замечания Prior to Chrome 4, the slash / notation is unsupported. If two values are specified, an elliptical border is drawn on all four corners. -webkit-border-radius: 40px 10px; is equivalent to border-radius: 40px/10px;.
Edge Полная поддержка 12Firefox Полная поддержка 3.5IE Полная поддержка ДаOpera Полная поддержка ДаSafari Полная поддержка Да
Замечания
Полная поддержка Да
Замечания
Замечания Prior to Safari 4.1, the slash / notation is unsupported. If two values are specified, an elliptical border is drawn on all four corners. -webkit-border-radius: 40px 10px; is equivalent to border-radius: 40px/10px;.
WebView Android ? Chrome Android Полная поддержка ДаEdge Mobile Полная поддержка ДаFirefox Android Полная поддержка 4Opera Android Нет поддержки НетSafari iOS ? Samsung Internet Android Полная поддержка Да
4 values for 4 cornersChrome Полная поддержка 4Edge Полная поддержка 12Firefox Полная поддержка ДаIE Полная поддержка ДаOpera Полная поддержка ДаSafari Полная поддержка 5WebView Android ? Chrome Android Полная поддержка ДаEdge Mobile Полная поддержка ДаFirefox Android Полная поддержка ДаOpera Android Нет поддержки НетSafari iOS ? Samsung Internet Android Полная поддержка Да
PercentagesChrome Полная поддержка Да
Замечания
Полная поддержка Да
Замечания
Замечания <percentage> values are not supported in older Chrome and Safari versions (it was fixed in Sepember 2010).
Edge Полная поддержка 12Firefox Полная поддержка 4
Замечания
Полная поддержка 4
Замечания
Замечания <percentage> values are implemented in a non-standard way prior to Firefox 4. Both horizontal and vertical radii were relative to the width of the border box.
IE Полная поддержка ДаOpera Полная поддержка 11.5
Замечания
Полная поддержка 11.5
Замечания
Замечания The implementation of <percentage> values was buggy in Opera prior to 11.50.
Safari Полная поддержка 5.1
Замечания
Полная поддержка 5.1
Замечания
Замечания <percentage> values are not supported in older Chrome and Safari versions (it was fixed in Sepember 2010).
WebView Android Полная поддержка Да
Замечания
Полная поддержка Да
Замечания
Замечания <percentage> values are not supported in older Chrome and Safari versions (it was fixed in Sepember 2010).
Chrome Android Полная поддержка ДаEdge Mobile Полная поддержка ДаFirefox Android Полная поддержка 4Opera Android Нет поддержки НетSafari iOS Полная поддержка Да
Замечания
Полная поддержка Да
Замечания
Замечания <percentage> values are not supported in older Chrome and Safari versions (it was fixed in Sepember 2010).
Samsung Internet Android Полная поддержка Да

Легенда

Полная поддержка  
Полная поддержка
Нет поддержки  
Нет поддержки
Совместимость неизвестна  
Совместимость неизвестна
Смотрите замечания реализации.
Смотрите замечания реализации.
Требует вендорный префикс или другое имя для использования.
Требует вендорный префикс или другое имя для использования.

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

Метки документа и участники

Внесли вклад в эту страницу: mdnwebdocs-bot, BychekRU, oxmap, roman-kosov, Sajag, Sebastianz
Обновлялась последний раз: mdnwebdocs-bot,