border-radius: скругление углов (CSS)

border-radius задаёт радиус скругления для углов элемента. Ниже — варианты использования с готовыми HTML+CSS, которые можно сразу открыть в браузере.

Одинаковое скругление для всех углов

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

html

<div class="box-all"></div>
 
<style>
  .box-all {
    width: 200px;
    height: 100px;
    background: #3498db;
    border-radius: 16px;
  }
</style>

Скругление только одного угла

Используют отдельные свойства для конкретного угла:

html

<div class="box-one-corner"></div>
 
<style>
  .box-one-corner {
    width: 200px;
    height: 100px;
    background: #e74c3c;
    border-top-right-radius: 20px;
  }
</style>

Здесь скруглён только правый верхний угол.

Два значения — пары углов

Два значения задают радиусы по парам: первое — для левого верхнего и правого нижнего, второе — для правого верхнего и левого нижнего:

<div class="box-two-values"></div>
 
<style>
  .box-two-values {
    width: 200px;
    height: 100px;
    background: #2ecc71;
    border-radius: 10px 20px;
  }
</style>

Четыре значения — отдельный радиус для каждого угла

Порядок значений — по часовой стрелке, начиная с левого верхнего:

<div class="box-four-values"></div>
 
<style>
  .box-four-values {
    width: 200px;
    height: 100px;
    background: #9b59b6;
    border-radius: 4px 12px 8px 24px;
  }
</style>

Эллиптическое скругление (овал вместо круга)

Через слэш задают горизонтальный и вертикальный радиусы:

html

<div class="box-ellipse"></div>
 
<style>
  .box-ellipse {
    width: 240px;
    height: 120px;
    background: #f1c40f;
    border-radius: 60px / 30px;
  }
</style>

Практические примеры

Кнопка с мягкими углами:

<button class="btn">Кнопка</button>
 
<style>
  .btn {
    padding: 12px 24px;
    background: #2ecc71;
    color: white;
    border: none;
    border-radius: 8px;
  }
</style>

Форма «таблетка» (овальная кнопка):

<button class="pill">Таблетка</button>
 
<style>
  .pill {
    padding: 10px 32px;
    background: #95a5a6;
    border: none;
    border-radius: 999px;
  }
</style>

Большое значение радиуса заставляет браузер сделать максимально возможную овальную форму.

Карточка с одним скруглённым углом:

html

<div class="card">Текст карточки</div>
 
<style>
  .card {
    width: 300px;
    padding: 20px;
    background: white;
    border: 1px solid #ddd;
    border-top-right-radius: 12px;
  }
</style>

Что может пойти не так

Слишком большой радиус. Если радиус больше половины стороны блока, углы становятся максимально скруглёнными — элемент выглядит почти овальным. Это не ошибка, просто так работает браузер.

Скругления не видно из‑за overflow. Если у родительского элемента стоит overflow: hidden, скруглённые части могут обрезаться. Пример проблемы:

html

<div class="parent">
  <div class="child"></div>
</div>
 
<style>
  .parent {
    overflow: hidden;
    width: 200px;
    height: 100px;
  }
  .child {
    width: 100%;
    height: 100%;
    background: #34495e;
    border-radius: 30px;
  }
</style>

В этом случае углы .child будут обрезаны по границам .parent.

Разные единицы измерения. Можно смешивать проценты и пиксели, но результат зависит от размеров блока:

border-radius: 10% 20px;

Процент считается отдельно по ширине и высоте для каждого угла — на разных размерах блока форма будет меняться. Для стабильного результата чаще используют пиксели или rem.