Как задать скругление углов только с одной стороны в CSS

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

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

Чтобы скруглить один конкретный угол, используй такие свойства:

border-top-left-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius

Пример:

cssКопироватьРедактировать.box {
  border-top-left-radius: 10px;
}

Можно применять любое значение: в пикселях, процентах и даже с двумя значениями (10px 20px).

Скругление одной стороны целиком (верх, низ, лево, право)

Если хочешь скруглить всю сторону (например, всю левую часть блока), комбинируй два угла:

cssКопироватьРедактировать.left-rounded {
  border-top-left-radius: 15px;
  border-bottom-left-radius: 15px;
}

.right-rounded {
  border-top-right-radius: 15px;
  border-bottom-right-radius: 15px;
}

Такой приём часто используют в карточках и кнопках.

Пример: карточка со скруглённой левой стороной

htmlКопироватьРедактировать<div style="
  width: 200px;
  height: 100px;
  background: lightblue;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;">
  Скругление слева
</div>

Комбинации радиусов

CSS позволяет задать скругление сразу четырёх углов одной строкой:

cssКопироватьРедактироватьborder-radius: 10px 0 0 10px;

Это значит:

верхний левый — 10px
верхний правый — 0
нижний правый — 0
нижний левый — 10px

Заключение

Чтобы скруглить один угол или сторону в CSS, используй border-top-left-radius и его аналоги. Это простой и мощный инструмент для точной настройки внешнего вида блоков, кнопок и карточек. Скругление делает интерфейс аккуратнее — особенно, если применять его дозированно.