Yıllardır web geliştiricileri, border-radius özelliğinin yalnızca yuvarlak köşeler sunması nedeniyle farklı köşe şekilleri elde etmek için clip-path, SVG maskeleri ve kırılgan geçici çözümlere başvuruyordu. Artık yeni CSS corner-shape özelliği sayesinde bu sınırlama sona eriyor. Bevel (eğimli), scoop (içbükey) ve squircle (süper elips) köşeleri doğrudan CSS ile tanımlamak mümkün hale geliyor. Bu özellik, border-radius ile birlikte çalışarak onun yarattığı eğrinin şeklini değiştiriyor ve geliştiricilere daha fazla esneklik sağlıyor.
corner-shape özelliği şu değerleri alabiliyor: round (varsayılan, normal border-radius), squircle (Apple tarzı yuvarlatılmış kare), bevel (düz çizgi ile kesilmiş köşeler), scoop (içbükey köşeler), notch (keskin içe doğru kesikler) ve square (köşeleri tamamen kaldırma). Ayrıca superellipse() fonksiyonu ile sayısal parametre kullanarak ince ayar yapmak da mümkün. Her köşe için farklı değerler atanabiliyor, tıpkı border-radius'ta olduğu gibi. Bu özellik sadece border değil, aynı zamanda outline, box-shadow ve background gibi öğelere de uygulanabiliyor.
corner-shape, Mart 2026 itibarıyla yalnızca Chrome 139+ ve diğer Chromium tabanlı tarayıcılarda destekleniyor. Bu nedenle, aşamalı iyileştirme (progressive enhancement) yaklaşımı benimsemek en doğrusu. Temel seviyede border-radius, clip-path veya radyal gradient maskeler gibi bilinen teknikler kullanılmalı, corner-shape destekleyen tarayıcılarda ise deneyim yükseltilmelidir. Örneğin, ürün kartlarındaki rozetler için basit bir yuvarlatılmış köşe her tarayıcıda çalışırken, destekleyen tarayıcılarda bevel veya squircle şekiller kullanılabilir.
Detaylar ve Etkileri
Geliştiricilerin corner-shape'i hemen benimsemesi için birkaç pratik demo mevcut. Örneğin, ürün kartlarında 'Yeni' veya 'İndirim' rozetleri için kullanılan kırılgan clip-path çözümleri yerine, corner-shape: bevel ile daha sağlam ve okunabilir bir kod yazılabilir. Ayrıca, uygulama simgeleri, butonlar ve kartlar gibi yaygın UI öğelerinde squircle köşeler modern ve yumuşak bir görünüm sağlar. corner-shape, border-radius'un yıllardır süregelen sınırlamalarını ortadan kaldırarak web tasarımında yeni bir dönem başlatıyor.
