Corner Shape — играем с уголками в CSS

14

Статус новой фичи в CSS «corner-shape» постепенно двигается. На 07 января 2026 года фича находится в статусе Limited availability на сайте Can I Use. Хотя в Хроме уже можно поиграть. Пока поддерживается только Chrome 139+ и браузеры на базе Chromium (Edge, Opera). Можно использовать @supports для прогрессивного улучшения.

Важная деталь: свойство работает только вместе с border-radius, который определяет размер скругления, а corner-shape определяет форму этого скругления.

Значения corner-shape

  • notch — врезанный угол. Создаёт острый внутренний «вырез», противоположность bevel. Полезен для создания «технологических» углов, стрелок, меток
  • bevel — скошенный угол. Рисует прямую линию под углом 45° между углами. При border-radius: 50% и bevel получишь ромб; используется для киберпанк-эстетики, геометрических фигур
  • scoop — вогнутые углы. Инвертирует кривую: вместо выпуклого скругления создаёт вогнутый «вырез». Используется для создания речевых пузырей, закруглений с вдавлениями
  • squircle — «квадроокружность». Плавный переход между квадратом и кругом. Создаёт более органичные углы, похожие на углы современных иконок приложений (iOS, Android)
  • round — значение по умолчанию. Создаёт привычные круглые или эллиптические углы, как работает обычный border-radius. Это стандартное поведение, к которому ты привык
  • square — сохраняет прямые углы, фактически отменяет скругление. Кажется странным, но полезен для анимаций между формами
  • superellipse() — функция для точного контроля.
    Это мощный параметрический инструмент:
    superellipse(0) = bevel (прямая линия)
    superellipse(1) = round (обычная кривая)
    superellipse(2) = squircle (квадроокружность)
    Чем выше число → тем более квадратная форма​
    Отрицательные значения (например, superellipse(-1) = scoop) создают вогнутые кривые

Примерно выглядит это так, как на иллюстрации ниже.

CSS
.corner-box {
  display: flex;
  color: #fff;
  font-size: 24px;
  align-items: center;
  justify-content: center;
  background-color: #989898;
  width: 100%;
  margin-inline: auto;
  height: 100px;
  border-radius: 20px;
}
.corner-box.notch {
  corner-shape: notch;
}
.corner-box.bevel {
  corner-shape: bevel;
}
.corner-box.scoop {
  corner-shape: scoop;
}
.corner-box.squircle {
  corner-shape: squircle;
}
.corner-box.round {
  corner-shape: round;
}
.corner-box.square {
  corner-shape: square;
}
.corner-box.superellipse {
  corner-shape: superellipse(0.6);
}

Ну и конечно, можно поиграть на CodePen.io

Связанные записи