CSS-свойство `border-radius`

border-radius — это CSS-свойство 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;
}

Составные свойства

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

• border-top-left-radius
• border-top-right-radius
• border-bottom-right-radius
• border-bottom-left-radius

Синтаксис

/* 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>. Это позволяет задать дополнительный радиус и получить эллиптические углы.

Значения

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>

Задаёт размер радиуса окружности или длину большой и малой полуосей эллипса с помощью значений длины. Отрицательные значения недопустимы.

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

Описание

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

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

Формальное определение

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

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

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

Примеры

Сравнение стилей рамок

В следующем примере показаны семь элементов <pre>, каждый из которых демонстрирует сочетания стилей border и border-radius. Стили, применённые к каждому элементу <pre>, указаны в его содержимом, чтобы вы могли увидеть объявления CSS, необходимые для создания соответствующего стиля рамки:

<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: 50px;
}

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

Использование corner-shape вместе с border-radius

Если для угла блока задано ненулевое значение 0 border-radius, можно использовать свойство corner-shape (или одно из его полных и сокращённых свойств), чтобы придать углу произвольную форму, например срез, выемку или суперэллипс. В этом примере показано использование corner-shape.

HTML

Разметка этого примера содержит один элемент <div>.

<div></div>

CSS

Мы задаём блоку базовые стили, которые здесь опущены для краткости. Также применяем box-shadow, border-radius со значением 0 20% 50px 30% и corner-shape со значением superellipse(0.5) bevel notch squircle.

body {
  font-family: "Helvetica", "Arial", sans-serif;
  width: 240px;
  margin: 20px auto;
}

div {
  width: 100%;
  height: 180px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: green;
  background-image: linear-gradient(
    to bottom,
    rgb(255 255 255 / 0),
    rgb(255 255 255 / 0.5)
  );
}

div {
  box-shadow: 1px 1px 3px gray;
  border-radius: 0 20% 50px 30%;
  corner-shape: superellipse(0.5) bevel notch squircle;
}

Результат

Отображаемый результат выглядит так:

Обратите внимание: к верхнему левому углу не применяется форма, поскольку для него задано значение border-radius, равное 0.

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

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

См. также

• Связанные со свойством border-radius свойства CSS: 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