border-radius

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

We’d love to hear your thoughts on the next set of proposals for the JavaScript language. You can find a description of the proposals here.

Please take two minutes to fill out our short survey.

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

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

border-radius: 30px;

border-radius: 25% 10%;

border-radius: 10% 30% 50% 70%;

border-radius: 10% / 50%;

border-radius: 10px 100px / 120px;

border-radius: 50% 20% / 10% 40%;

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">
    This is a box with rounded corners.
  </div>
</section>

#example-element {
  width: 80%;
  height: 80%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  background-color: #5b6dcd;
  color: white;
  padding: 10px;
}

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

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

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

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

Синтаксис

css

/* Такой синтаксис позволяет указать всего одно значение, вместе четырёх */
/* Скругление применяется ко всем четырём углам */
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		`<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>` устанавливает радиус для нижнего левого угла элемента. Следует использовать синтаксис с четырьмя значениями.

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

Например:

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;

css

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 = 
  <length-percentage [0,∞]>{1,4} [ / <length-percentage [0,∞]>{1,4} ]?  

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

Примеры

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

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

Пример 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/

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

Specification
CSS Backgrounds and Borders Module Level 3 # border-radius

Начальное значение	как и у каждого из подсвойств этого свойства: `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>`
Animation type	как и у каждого из подсвойств этого свойства: `border-top-left-radius`: длина, проценты или calc(); `border-top-right-radius`: длина, проценты или calc(); `border-bottom-right-radius`: длина, проценты или calc(); `border-bottom-left-radius`: длина, проценты или calc();

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

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

Относящиеся к Border-radius CSS-свойства: border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius