Вітаю, товариство! Сьогодні хочу розповісти вам про нову можливість в CSS, про яку дізнався буквально вчора.
В Chromе та Edge зʼявилася підтримка властивості
corner-shape, яка дозволяє змінювати форму кутиків елемента, якщо у нього заданий border-radius.Наразі ця властивість підтримує настапні значення:
round: звичні нам круглі кутики.bevel: фаска, прямо зрізані кутики.scoop: круглі кутики, вирізані всередину.notch: вирізані всередину прямокутники.squircle: чорт-зна-шо, якісь скруглені квадрати )Що цікаво, можна задавати форму для кожного кутика окремо:
corner-shape: round bevel bevel round;В такий спосіб можна створювати різні цікаві форми, не обмежуючись лише просто кусаними кутиками.
А тепер тако: спочатку ставите вогник цьому допису, поширюєте його, а далі переходите за посиланням на статтю, в якій є цікаві приклади практичного застосування.
📖 CSS Tricks: What Can We Actually Do With corner-shape?
А далі можна побавитися в пісочниці.
📖 MDN: corner-shape
Як я вже зазначив, це поки експериментальна підтримка, однак завжди варто бути готовими до забаганок дизайнерів, еге ж? )