Как сделать элемент с одним изогнутым нижним правым border-ом на CSS

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

Способ 1: Использование border-radius с разными значениями

Свойство border-radius принимает до четырёх значений (по часовой стрелке: верхний левый, верхний правый, нижний правый, нижний левый). Чтобы скруглить только нижний правый угол, задайте радиус для него, а остальным поставьте 0.

.block {
  width: 200px;
  height: 100px;
  background: #f0f0f0;
  border: 2px solid #333;
  border-radius: 0 0 20px 0;
}

В этом примере border-radius: 0 0 20px 0 означает: верхний левый - 0, верхний правый - 0, нижний правый - 20px, нижний левый - 0. Метод работает во всех современных браузерах и не требует дополнительных элементов.

Способ 2: Использование псевдоэлемента ::before или ::after

Если вам нужно имитировать изогнутую границу без изменения фона самого блока (например, при сложном фоне), можно наложить псевдоэлемент с закруглённым углом поверх блока.

.block {
  position: relative;
  width: 200px;
  height: 100px;
  background: #fff;
  border: 2px solid #333;
  overflow: hidden;
}
.block::after {
  content: '';
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: 0 0 0 20px;
}

Этот приём скрывает прямой угол рамки, создавая иллюзию скругления. Подходит для случаев, когда нужно сохранить прозрачность или сложный фон.

Способ 3: Использование clip-path для изогнутого края

Свойство clip-path позволяет обрезать элемент по произвольной траектории. Для скругления одного угла используйте функцию path() или inset() с закруглением.

.block {
  width: 200px;
  height: 100px;
  background: #f0f0f0;
  border: 2px solid #333;
  clip-path: inset(0 0 0 0 round 0 0 20px 0);
}

Значение inset(0 0 0 0 round 0 0 20px 0) задаёт отступы от каждого края (все 0) и радиус скругления для нижнего правого угла 20px. Обратите внимание: clip-path обрезает и фон, и рамку, поэтому граница будет видна только по обрезанному контуру. Этот метод поддерживается всеми современными браузерами, но может не работать в старых версиях Internet Explorer.

Какой способ выбрать?

• border-radius - самый простой и кросс-браузерный вариант, если нужен именно скруглённый угол рамки.
• Псевдоэлемент - когда требуется сложная анимация или сохранение прозрачности фона.
• clip-path - если нужно обрезать блок по сложной кривой, но помните об ограничениях поддержки.

Все описанные методы не требуют SVG и работают на чистом CSS. Выбирайте подходящий под вашу задачу.