Справочник · CSS

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

Редакция PraktumОбновлено 24 октября 20265 мин чтенияУровень: новичок

Свойство border-radius скругляет углы элемента: фон, рамку, тень и область обрезки. Одно значение скругляет все углы одинаково (border-radius: 12px), четыре — каждый угол отдельно. Значение 50% у квадрата даёт круг, а очень большой радиус у прямоугольника — капсулу.

Минимальный пример

.card   { border-radius: 16px; }
.avatar { width: 80px; aspect-ratio: 1; border-radius: 50%; object-fit: cover; }
.tag    { border-radius: 999px; padding: 4px 12px; }

Карточка со скруглёнными углами, круглая аватарка и тег-капсула. Скругление работает и без рамки: скругляется фон и всё, что рисуется на элементе.

Углы по отдельности

.panel  { border-radius: 16px 16px 0 0; }   /* только верхние */
.bubble { border-radius: 16px 16px 16px 4px; } /* «хвостик» сообщения */
.box    { border-top-left-radius: 24px; }

Отдельные свойства: border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius. Логические аналоги вроде border-start-start-radius учитывают направление письма.

Круг и капсула

.avatar {
  width: 64px;
  height: 64px;          /* или aspect-ratio: 1 */
  border-radius: 50%;
  object-fit: cover;
}
.pill { border-radius: 999px; }

50% считается от размеров самого элемента: по горизонтали — от ширины, по вертикали — от высоты. У квадрата это круг, а у прямоугольника — эллипс, а не капсула. Капсулу (прямые бока и полукруглые торцы) даёт заведомо большой радиус в пикселях: браузер сам уменьшит его до половины высоты.

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

.blob { border-radius: 40% 60% 55% 45% / 50% 40% 60% 50%; }
.leaf { border-radius: 0 100% 0 100%; }

Через косую черту задают горизонтальные и вертикальные радиусы отдельно — угол становится эллиптическим. Так рисуют «капли», листья и органичные формы для декора, без картинок.

Обрезка содержимого

.card {
  border-radius: 16px;
  overflow: hidden;   /* картинка не вылезает за скругление */
}
.card img { display: block; width: 100%; }

Скругление не обрезает детей: картинка во всю ширину карточки останется с острыми углами поверх скруглённого фона. overflow: hidden на карточке обрезает содержимое по скруглению. Помни, что он обрежет и всё, что должно выходить за край: выпадающие меню, подсказки, тени детей. Альтернатива — скруглить саму картинку теми же углами или использовать overflow: clip.

Шкала радиусов

:root {
  --radius-s: 6px;     /* поля ввода, мелкие кнопки */
  --radius-m: 12px;    /* карточки */
  --radius-l: 20px;    /* большие блоки, модальные окна */
  --radius-full: 999px;/* теги, кнопки-капсулы */
}
.card { border-radius: var(--radius-m); }

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

Пиксели, проценты или em

50% или 999px

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

• Ставят 50% прямоугольнику и ждут круг или капсулу — получается овал.
• Скругляют карточку, а картинка внутри остаётся с острыми углами.
• Добавляют overflow: hidden и обрезают выпадающее меню.
• Используют разные случайные радиусы на одной странице.
• Скругляют вложенные элементы тем же радиусом, что и внешний, и углы выглядят неровно.

Доступность

Скругление не влияет на доступность само по себе, но учти: круглые кнопки-иконки должны быть не меньше 44×44 пикселей и иметь текстовую подпись через aria-label. Рамка фокуса в современных браузерах повторяет скругление элемента — проверь, что она хорошо видна.

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

border-radius поддерживается всеми браузерами без префиксов. Логические свойства углов и overflow: clip работают в актуальных версиях браузеров.

.avatar { width: 64px; aspect-ratio: 1; border-radius: 50%; object-fit: cover; }
.card { border-radius: 16px; overflow: hidden; }
.card img { display: block; width: 100%; }
.tag { border-radius: 999px; padding: 4px 12px; }
.bubble { border-radius: 16px 16px 16px 4px; padding: 10px 14px; background: #eef2ff; }