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

Определение и применение

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

• border-bottom-left-radius (определяет форму нижнего левого угла).
• border-bottom-right-radius (определяет форму нижнего правого угла).
• border-top-left-radius (определяет форму верхнего левого угла).
• border-top-right-radius (определяет форму верхнего правого угла).

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

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

1. Без скругления. Радиусы равны 0 — это начальное значение.
2. Дуга окружности. Одинаковые горизонтальный и вертикальный радиусы, например 24px.
3. Дуга эллипса. Горизонтальные радиусы задаются перед /, вертикальные — после, например 48px / 24px.

Радиусы распределяются по углам в зависимости от количества значений:

• Одно — для всех четырёх углов.
• Два — верхний левый и нижний правый; затем верхний правый и нижний левый.
• Три — верхний левый; верхний правый и нижний левый; нижний правый.
• Четыре — верхний левый, верхний правый, нижний правый, нижний левый (по часовой стрелке).

Это правило применяется отдельно к значениям до и после /. Без косой черты вертикальные радиусы совпадают с горизонтальными. В примере ниже показан порядок записи горизонтальных (h) и вертикальных (v) радиусов:

border-radius: 10px 20px 30px 40px / 5px 10px 15px 20px;

До косой черты указаны горизонтальные радиусы, после неё — вертикальные. В каждой группе четыре значения идут по часовой стрелке: верхний левый, верхний правый, нижний правый и нижний левый угол. Например, у верхнего левого угла радиусы равны 10px по горизонтали и 5px по вертикали.

Радиусы задаются в единицах длины CSS или процентах. Проценты вычисляются от ширины и высоты блока соответственно, поэтому одно процентное значение может дать разные радиусы. Отрицательные значения недопустимы.

Попробуйте значения border-radius

<div class="demo-target">Рамка элемента</div>

.demo-target {
  box-sizing: border-box;
  width: 100%;
  max-width: 260px;
  min-height: 150px;
  padding: 24px;
  background: #ffe4bd;
  border: 8px solid #245a85;
  color: #172c3d;
  font: 18px/1.5 system-ui;
  border-radius: 0;
}

.demo-target {
  box-sizing: border-box;
  width: 100%;
  max-width: 260px;
  min-height: 150px;
  padding: 24px;
  background: #ffe4bd;
  border: 8px solid #245a85;
  color: #172c3d;
  font: 18px/1.5 system-ui;
  border-radius: 16px;
}

.demo-target {
  box-sizing: border-box;
  width: 100%;
  max-width: 260px;
  min-height: 150px;
  padding: 24px;
  background: #ffe4bd;
  border: 8px solid #245a85;
  color: #172c3d;
  font: 18px/1.5 system-ui;
  border-radius: 48px;
}

.demo-target {
  box-sizing: border-box;
  width: 100%;
  max-width: 260px;
  min-height: 150px;
  padding: 24px;
  background: #ffe4bd;
  border: 8px solid #245a85;
  color: #172c3d;
  font: 18px/1.5 system-ui;
  border-radius: 50%;
}

Поддержка браузерами

Спецификация: CSS backgrounds

✓Поддерживается во всех основных браузерах с 2015 года.

Показать браузеры

ВсеКомпьютерыМобильные

Совместимостьcss.properties.border-radius

Возможность	Компьютеры					Мобильные
	ChromeChrome	EdgeEdge	FirefoxFirefox	OperaOpera	SafariSafari	Chrome AndroidChromeAndroid	Firefox for AndroidFirefoxAndroid	Opera AndroidOperaAndroid	Safari on iOSSafariiOS	Samsung BrowserSamsungAndroid	WebView AndroidWebViewAndroid	WebView on iOSWebViewiOS
border-radius	✓4…	✓12…	✓4…	✓10.5…	✓5…	✓18	✓4…	✓11	✓4.2…	✓1.0	✓≤4.4…	✓4.2…
4 values for 4 corners	✓4	✓12	✓4	✓10.5	✓5	✓18	✓4	✓11	✓4.2	✓1.0	✓4.4	✓4.2
Elliptical borders	✓1…	✓12	✓4	✓10.5	✓3…	✓18	✓4	✓11	✓4.2	✓1.0	✓4.4	✓4.2
percentages	✓8	✓12	✓4…	✓11.5…	✓5.1	✓18	✓4	✓11.5	✓5	✓1.0	✓4.4	✓5
Ещё 3 значений · ✓ поддерживаются везде более 3 летСвернуть

✓поддерживается◐с ограниченияминет поддержки?нет данных≤31 — не позднее версии 31

CSS синтаксис:

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

/* Глобальные значения */
border-radius: initial | inherit | unset | revert | revert-layer;

[ ] — группа, а внутри типа — допустимый диапазон; ? — необязательная часть; {1,4} — число повторений от 1 до 4; ∞ — отсутствие верхней границы; / — буквальный разделитель.

/* Радиус применяется ко всем четырем углам (по типу дуги окружности) */
border-radius :  15px;

/* 1-ое значение top-left и bottom-right, второе top-right и bottom-left */
border-radius :  15px 35%;

/* 1-ое значение top-left, второе top-right и bottom-left, третье bottom-right */
border-radius :  14px 18px 50%;

/* 1-ое значение top-left, второе top-right, третье bottom-right, четвертое bottom-left */
border-radius :  22% 11px 14px 15px;


/* горизонтальный радиус 1-ое значение top-left и bottom-right, второе top-right и bottom-left /
 вертикальный радиус  - значение применяется ко всем четырем углам */
border-radius :  15px 15% / 15px;

/* горизонтальный радиус 1-ое значение top-left и bottom-right, второе top-right и bottom-left  /
 вертикальный радиус  - 1-ое значение top-left и bottom-right, второе top-right и bottom-left */
border-radius :  10px 15% / 10px 40px;

/* горизонтальный радиус 1-ое значение top-left, второе top-right и bottom-left, третье bottom-right /
 вертикальный радиус  - 1-ое значение top-left, второе top-right и bottom-left, третье bottom-right */
border-radius :  20px 15px 6em / 20px 25px 30%;

/* горизонтальный радиус 1-ое значение top-left и bottom-right, второе top-right и bottom-left /
 вертикальный радиус  - 1-ое значение top-left, второе top-right, третье bottom-right, четвертое bottom-left */
border-radius :  15px 15% / 10px 15em 15px 5em;

JavaScript синтаксис:

element.style.borderRadius = "5px";

Начальное значение свойства

• border-top-left-radius — 0;
• border-top-right-radius — 0;
• border-bottom-right-radius — 0;
• border-bottom-left-radius — 0.

Значения свойства

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

CSS Backgrounds and Borders — спецификация border-radius.

Наследуется

Нет.

Анимируемое

Зависит от составляющих свойств: border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius. Числовые значения и цвета могут изменяться плавно; дискретные значения переключаются.

Примеры, попробуйте сами

Круговые и эллиптические скругления

В варианте A все углы одинаковые, в B чередуются два радиуса, в C радиусы по горизонтали и вертикали различаются. Измените 32px на 0, затем поменяйте значения до и после косой черты в варианте C.

base.css

CSS

* {
    box-sizing: border-box;
}
body {
    margin: 16px;
    font:
        16px/1.4 system-ui,
        sans-serif;
    color: #172c3d;
}
.comparison {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
    gap: 20px;
}
h3 {
    margin: 0 0 12px;
    font-size: 16px;
}
.sample {
    height: 130px;
    border: 3px solid #35658a;
    background: #c5dbea;
}

index.html

HTML

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Круговые и эллиптические скругления</title>
  </head>
  <body>
    <div class="comparison">
      <section>
        <h3>Вариант A</h3>
        <div class="sample first"></div>
      </section>
      <section>
        <h3>Вариант B</h3>
        <div class="sample second"></div>
      </section>
      <section>
        <h3>Вариант C</h3>
        <div class="sample third"></div>
      </section>
    </div>
  </body>
</html>

style.css

CSS

.first {
    border-radius: 32px; /* Одинаковый радиус у всех углов. */
}
.second {
    border-radius: 48px 12px; /* Пары противоположных углов. */
}
.third {
    border-radius: 72px / 24px; /* Горизонтальный радиус / вертикальный. */
}