Yıllardır geliştiriciler, border-radius özelliğinin sınırlamalarını aşmak için clip-path, SVG maskeleri ve kırılgan geçici çözümler kullanarak yalnızca yuvarlak köşelerin ötesine geçmeye çalışıyorlardı. Yeni corner-shape özelliği nihayet bu durumu değiştiriyor ve eğimli (bevel), oyuk (scoop) ve squircle köşelerin kapısını aralıyor. Web siteleri oluşturmaya ilk başladığımda, yuvarlak köşeler beş farklı arka plan resmi gerektiriyordu; her köşe için bir tane, bir tane gövde için ve bir de müşterinin farklı bir yarıçap istememesi duası. Ardından border-radius özelliği geldi ve tüm web topluluğu rahat bir nefes aldı. Bu on beş yıldan uzun bir süre önceydi ve o zamandan beri aynı dalgada sörf yapıyorduk. Umarım bu yeni özelliği de kademeli bir iyileştirme olarak görüp diğer tarayıcılara yayılmasını bekleyebiliriz.
Peki, corner-shape nedir? Bu özellik, border-radius'ın bir arkadaşıdır; onu değiştirmez, aksine border-radius'ın oluşturduğu eğrinin şeklini modifiye eder. border-radius olmadan corner-shape hiçbir şey yapmaz, ancak birlikte güçlü bir ikili oluştururlar. Özellik şu değerleri alır: round (varsayılan, normal border-radius gibi), squircle (Apple tarzı yumuşak kare), bevel (iki yarıçap ucu arasında düz çizgi, kesik köşeler), scoop (içbükey köşeler), notch (keskin içe doğru kesikler) ve square (yuvarlamayı kaldırır). Ayrıca her köşe için farklı değerler ayarlayabilirsiniz: corner-shape: bevel round scoop squircle; (sırasıyla sol üst, sağ üst, sağ alt, sol alt). superellipse() fonksiyonu ile sayısal parametre kullanarak ince ayar yapmak da mümkün. Peki neden bu özelliğe 'border-shape' denmemiş? Çünkü bu, yakında deneyimleyeceğimiz bambaşka bir şey ve corner-shape, kenarlıkların yanı sıra outline, box-shadow ve arka planlara da uygulanabiliyor; clip-path'in asla yapamadığı bir şey.
corner-shape şu an (Mart 2026 itibarıyla) yalnızca Chrome 139+ ve diğer Chromium tabanlı tarayıcılarda destekleniyor. Bu, önemli bir kullanıcı kitlesi olsa da herkes değil. Bu noktada kademeli iyileştirme (progressive enhancement) önem kazanıyor. Temel seviyede, zaten bildiğimiz border-radius, clip-path, radial-gradient maskeleri gibi teknikleri kullanarak kasıtlı olarak iyi görünen bir tasarım oluşturmalıyız. Ardından, corner-shape destekleyen tarayıcılar için deneyimi yükseltmeliyiz. Bu makaledeki her demo bu fikirle oluşturuldu. Yapı şu şekilde: @layer base, presentation, demo; presentation katmanı kanıtlanmış tekniklerle tam cilalı UI'ı içerirken, demo katmanı her şeyi @supports (corner-shape: bevel) { ... } ile sarar. Hiçbir 'tarayıcınız desteklemiyor' mesajı yok; sadece iki tasarım seviyesi: iyi ve daha iyi.
Bir örnek olarak, e-ticaret sitelerindeki ürün kartlarında kullanılan kurdele rozetlerini ele alalım. Geleneksel olarak bu şekli elde etmek için clip-path: polygon() veya döndürülmüş bir pseudo-element kullanmak gerekir; bu da 'uğraştırıcı kod' olarak adlandırılabilir ve biri padding değerini değiştirdiğinde dağılma potansiyeli vardır. Ancak temel seviyede kurdele şekline ihtiyacımız yok; hafif yuvarlatılmış köşelere sahip basit bir rozet aynı hikayeyi anlatır ve gayet iyi görünür. corner-shape destekleyen tarayıcılarda ise şu şekilde iyileştirme yapabiliriz: @supports (corner-shape: bevel) { .product { border-radius: 40px; corner-shape: squircle; } .product__badge { border-radius: 0 16px 16px 0; corner-shape: round bevel bevel round; } } round bevel bevel round kombinasyonu, yönlü bir kurdele oluşturur. Gördüğünüz gibi, corner-shape ile hem daha estetik hem de daha esnek tasarımlar yapmak mümkün.
