Border-radius

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

Зачем нужно

Скруглённые углы — стандарт современного UI. Аватарки (круглые), карточки, кнопки, модальные окна — почти везде используется border-radius. Эллиптические радиусы открывают возможности для креативных форм.

Где используется

  • Карточки, кнопки, бейджи
  • Круглые аватарки
  • Закруглённые изображения
  • Декоративные формы
  • «Капли» и органические фигуры

Предпосылки

Базовый синтаксис

/* Все углы одинаковые */
.box { border-radius: 8px; }

/* Разные углы: top-left | top-right | bottom-right | bottom-left */
.box { border-radius: 8px 16px 8px 16px; }

/* Два значения: top-left+bottom-right | top-right+bottom-left */
.box { border-radius: 8px 16px; }

/* Три: top-left | top-right+bottom-left | bottom-right */
.box { border-radius: 8px 16px 4px; }

Отдельные углы

.box {
  border-top-left-radius: 8px;
  border-top-right-radius: 16px;
  border-bottom-right-radius: 8px;
  border-bottom-left-radius: 16px;
}

/* Логические свойства */
.box {
  border-start-start-radius: 8px; /* top-left в LTR */
  border-start-end-radius: 16px;  /* top-right в LTR */
  border-end-end-radius: 8px;     /* bottom-right в LTR */
  border-end-start-radius: 16px;  /* bottom-left в LTR */
}

Эллиптические углы

/* Горизонтальный / Вертикальный радиус */
.elliptical { border-radius: 50px / 25px; }

/* Для каждого угла отдельно */
.custom {
  border-radius: 10px 20px 30px 40px / 40px 30px 20px 10px;
  /* horizontal: TL TR BR BL / vertical: TL TR BR BL */
}

/* Отдельный угол */
.box {
  border-top-left-radius: 50px 25px; /* horiz vert */
}

Создание фигур

Круг

.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%; /* Круг при одинаковых width и height */
  background: #3498db;
}

/* Круглая аватарка */
.avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover; /* Для <img> */
}

Эллипс

.ellipse {
  width: 200px;
  height: 100px;
  border-radius: 50%; /* Эллипс при разных width и height */
  background: #e74c3c;
}

Капсула / Pill

.pill {
  padding: 8px 24px;
  border-radius: 9999px; /* Большое значение = капсула */
  background: #3498db;
  color: white;
}

Капля (blob)

.blob() {
  width: 200px;
  height: 200px;
  border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
  background: linear-gradient(135deg, #667eea, #764ba2);
}

Полукруг

.semicircle {
  width: 200px;
  height: 100px;
  border-radius: 100px 100px 0 0; /* Верхний полукруг */
  background: #2ecc71;
}

Четверть круга

.quarter {
  width: 100px;
  height: 100px;
  border-radius: 100px 0 0 0; /* Верхний левый */
  background: #f39c12;
}

border-radius + overflow: hidden

/* Скруглить контент внутри (изображения, видео) */
.card {
  border-radius: 12px;
  overflow: hidden; /* Контент не вылезает за скругления */
}

.card img {
  width: 100%;
  display: block;
  /* Без overflow: hidden углы img будут прямыми */
}

Процентные значения

/* Процент от ширины (горизонтальный) и высоты (вертикальный) */
.responsive {
  border-radius: 10%; /* 10% ширины по горизонтали, 10% высоты по вертикали */
}

/* 50% — максимальное скругление */
.max-round {
  border-radius: 50%;
}

При border-radius: 50% на прямоугольнике получится эллипс, на квадрате — круг.

Частые ошибки

  1. border-radius: 50% на прямоугольнике — получается эллипс, не круг. Для круга нужны равные width и height

  2. Контент вылезает за скругления — нужен overflow: hidden:

    .card {
  border-radius: 12px;
  overflow: hidden; /* Обязательно для вложенных <img> */
}

  3. Слишком маленький radius для крупных элементов — 4px на модальном окне выглядит прямоугольным. Масштабируйте: карточки 8-16px, кнопки 4-8px, модалки 12-24px

  4. border-radius и border-image — несовместимы, радиус игнорируется при border-image

Практика

  • Создать круглую аватарку с border-radius: 50%
  • Сделать кнопку-капсулу с border-radius: 9999px
  • Создать «каплю» с эллиптическими радиусами
  • Применить overflow: hidden к карточке с изображением

Связанные темы

  • Border — границы элемента
  • Box-shadow — тени с учётом border-radius
  • Overflow — overflow: hidden для скругления контента

Ресурсы