Обычный
border-radius строит эллиптическое скругление. Но в интерфейсах часто нужны более плавные, «квадратные» скругления — squircle.Раньше для точной формы приходилось использовать SVG,
clip-path или маски.Теперь форму угла можно менять отдельно от его радиуса:
.card {
corner-shape: squircle;
}При этом
border-radius всё ещё определяет область скругления — без ненулевого радиуса corner-shape визуально ничего не изменит.Есть и другие формы:
.card {
corner-shape: bevel;
}И даже вогнутые углы:
.card {
corner-shape: scoop;
}Причём границы, фон, outline и тени следуют новой форме углов, а сами формы можно анимировать. Поддержка пока ограничена.
corner-shape позволяет делать squircle, bevel и вогнутые углы двумя строками CSS — без дополнительной разметки и SVG.
Code Ready | #совет
