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

 

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

border-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;

Значения

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> обозначает радиус, используемый для границы в нижнем левом углу элемента. Используется только при указании четырех значений.
inherit   Это ключевое слово указывает, что все четыре значения наследуются от родителя.
<length>
Обозначает размер радиуса окружности или полу-основных и полу-малой осей эллипса. Может быть выражена в любых единицах CSS <length>. Отрицательные значения не принимаются.
<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
Базовая поддержкаChrome Полная поддержка 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 Полная поддержка Да
Замечания
Полная поддержка Да
Замечания
Замечания 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.
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 Полная поддержка ДаOpera 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 Полная поддержка ДаOpera Android Нет поддержки НетSafari iOS Полная поддержка Да
Замечания
Полная поддержка Да
Замечания
Замечания <percentage> values are not supported in older Chrome and Safari versions (it was fixed in Sepember 2010).
Samsung Internet Android Полная поддержка Да

Легенда

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

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

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

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