Тонкости border-radius: когда углы не скругляются и почему (CSS)

Свойство border-radius кажется простым: задал радиус — углы скруглились. Но на практике бывают ситуации, когда ожидаемого эффекта нет: углы остаются прямыми, скругление «ломается», появляются артефакты или скругления вообще не видно. Разберём частые причины и способы их исправить — с примерами.

Как вообще работает border-radius

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

.box {
  width: 200px;
  height: 100px;
  background: #3498db;
  border-radius: 16px;
}

Разные радиусы для углов:

/* top-left, top-right, bottom-right, bottom-left */
.box {
  border-radius: 8px 16px 24px 32px;
}

Можно задавать отдельно по осям (эллиптическое скругление):

.box {
  border-radius: 20px / 10px; /* горизонтальный / вертикальный */
}

Ситуация 1: у элемента нет рамки или фона, поэтому скругления не видно

Если у элемента нет background, border или box-shadow, то визуально скругление может быть незаметно. Особенно если родительский фон совпадает с фоном страницы.

Пример проблемы:

<div class="box"></div>

.box {
  width: 200px;
  height: 100px;
  border-radius: 16px; /* выглядит как обычный прямоугольник */
}

Решение: добавьте background или border:

.box {
  width: 200px;
  height: 100px;
  background: #3498db;
  border: 1px solid #ccc;
  border-radius: 16px;
}

Теперь скругление видно.

Ситуация 2: overflow: hidden у родителя «отрезает» скругление

Когда у родителя стоит overflow: hidden, а дочерний элемент имеет скруглённые углы, часть скругления может быть обрезана. Это особенно заметно, если у дочернего элемента есть тень или рамка.

Пример:

<div class="parent">
  <div class="child"></div>
</div>

.parent {
  width: 200px;
  height: 100px;
  overflow: hidden; /* вот причина обрезки */
}
 
.child {
  width: 100%;
  height: 100%;
  background: #e74c3c;
  border-radius: 24px;
}

Скругления будут обрезаны по границам родителя.

Решения:

1. Убрать overflow: hidden у родителя, если он не нужен.
2. Если overflow: hidden нужен (например, для обрезки контента), перенести border-radius на родитель и сделать его видимым (добавить фон/рамку).
3. Либо сделать дочерний элемент чуть меньше, чтобы скругления не упирались в край родителя (не лучший вариант, но иногда помогает).

Ситуация 3: скругление конфликтует с box-sizing и размерами

Если элемент очень маленький по высоте, а радиус большой, скругление может «вылезать» за пределы или выглядеть странно. В крайних случаях браузер может сильно сплющить эллипс.

Пример:

.tiny {
  height: 8px;
  width: 200px;
  background: #2ecc71;
  border-radius: 50%; /* ожидаем «капсулу», но высота слишком маленькая */
}

Здесь 50% означает «половина высоты», то есть 4 px. Это нормально, но если высота 4 px, а вы задаёте border-radius: 20px, браузер всё равно ограничит радиус размерами элемента.

Практический совет: для «капсул» лучше задавать фиксированный радиус, а не проценты:

.capsule {
  height: 32px;
  padding-left: 16px;
  padding-right: 16px;
  background: #f39c12;
  border-radius: 16px; /* ровно половина высоты */
}

Ситуация 4: border-radius не работает на отдельных углах из‑за конфликта значений

Иногда задают отдельные значения для углов, но путают порядок.

.box {
  /* top-left, top-right, bottom-right, bottom-left */
  border-radius: 0 0 16px 16px; /* скруглены только нижние углы */
}

Если вы хотели скруглить верхние, а написали 0 — они останутся прямыми. Это не баг, а следствие порядка записи.

Чтобы скруглить только один угол:

.box {
  border-top-left-radius: 12px;
}

Аналогично: border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius.

Ситуация 5: вложенные элементы перекрывают углы

Если внутри блока есть другой блок с фоном, который доходит до краёв, он может перекрывать скругление родителя.

<div class="outer">
  <div class="inner"></div>
</div>

.outer {
  width: 200px;
  height: 100px;
  background: #9b59b6;
  border-radius: 16px;
}
 
.inner {
  width: 100%;
  height: 100%;
  background: white; /* перекрывает углы родителя */
}

В этом случае скругление у .outer визуально не видно, потому что .inner закрывает углы.

Решения:

• Задайте скругление самому .inner, если он должен быть основным видимым блоком.
• Либо у .inner сделайте размеры чуть меньше и добавьте отступы.
• Либо используйте overflow: hidden на родителе и оставьте скругление только у него, а у вложенного блока уберите фон.

Ситуация 6: старые браузеры и очень старые версии IE

В очень старых браузерах (особенно Internet Explorer до 9‑й версии) border-radius либо не поддерживается, либо работает с артефактами. Для современных проектов это редко актуально, но если поддержка старых браузеров обязательна, придётся использовать полифилы или обходные решения (картинки, псевдоэлементы и т. п.).

Ситуация 7: border-radius и box-shadow — появляются «усы» и артефакты

Когда к элементу со скруглением добавляют тень, на углах могут появляться тонкие линии или «усы». Это связано с тем, как браузер рисует тень вокруг скруглённой формы.

.box {
  width: 200px;
  height: 100px;
  background: #ecf0f1;
  border-radius: 16px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}

Чаще всего это заметно на контрастных фонах.

Что помогает:

• Использовать overflow: hidden на самом элементе (иногда убирает артефакты, но обрезает тень).
• Играть с параметрами тени: уменьшить размытие, изменить смещение.
• В крайних случаях — использовать псевдоэлемент для фона и отдельный элемент/псевдоэлемент для тени.

Практический пример: карточка товара с аккуратной рамкой и тенью

Задача: сделать карточку с скруглёнными углами, рамкой и тенью, без артефактов.

<article class="card">
  <h3>Товар</h3>
  <p>Описание товара.</p>
</article>

.card {
  width: 280px;
  background: #ffffff;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  padding: 16px;
  font-family: sans-serif;
}

Здесь:

• border делает границу видимой.
• border-radius скругляет углы.
• box-shadow добавляет мягкую тень.
• Фон белый, поэтому скругление хорошо заметно.

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

• Есть ли у элемента background или border.
• Не обрезается ли скругление overflow: hidden.
• Не перекрывают ли углы вложенные блоки.
• Не слишком ли большой радиус относительно размеров элемента.
• Правильно ли задан порядок значений или используются отдельные свойства для углов.