Code Ready | Frontend
Фотография
нажмите — покажем
нажмите — покажем
Делаем «сквиркл»-углы нативно в CSS!
Обычный 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 | #совет
47 · 2K ·