Yıllardır web geliştiricileri, yuvarlaktan farklı köşeler elde etmek için clip-path, SVG maskeleri ve kırılgan geçici çözümler kullanmak zorunda kalıyordu. CSS'in yeni corner-shape özelliği işte bu sorunu çözüyor. border-radius'ın yanında çalışan bu özellik, pahlı (bevel), oyuk (scoop) ve squircle (süper elips) gibi farklı köşe şekillerini mümkün kılıyor. Artık bir köşeyi yuvarlak yapmakla sınırlı kalmıyor, istediğiniz şekli doğrudan CSS ile belirleyebiliyorsunuz.
corner-shape özelliği round (varsayılan), squircle (Apple tarzı yumuşak kare), bevel (düz kesilmiş köşe), scoop (içe doğru oyuk), notch (keskin içe kesim) ve square (yuvarlatmayı kaldırma) değerlerini alıyor. Her köşe için farklı değerler atamak mümkün: örneğin corner-shape: bevel round scoop squircle; ile her köşe farklı bir şekil alabilir. Ayrıca superellipse() fonksiyonu ile hassas kontrol sağlanabiliyor.
Bu özellik şu an için yalnızca Chrome 139+ ve Chromium tabanlı tarayıcılarda destekleniyor. Ancak progressive enhancement (aşamalı iyileştirme) yaklaşımıyla, desteklemeyen tarayıcılar için border-radius gibi bilinen yöntemlerle sağlam bir temel oluşturup, corner-shape destekleyenlerde deneyimi yükseltebiliriz. Örneğin ürün kartlarında rozetler için önce basit yuvarlatılmış köşeler kullanılırken, corner-shape ile pahlı ve yönlü rozetler elde edilebiliyor.
corner-shape sayesinde sadece köşeler değil, outline, box-shadow ve arka planlar da aynı şekli alıyor. Bu, clip-path ile yapılamayan bir şey. Gelecekte daha yaygın desteklendiğinde, kullanıcı arayüzlerinde daha yaratıcı ve tutarlı tasarımlar görmek mümkün olacak. Şimdiden denemeye başlamak için harika bir zaman: basit bir border-radius ile başlayın, corner-shape ile süslendirin.
