Yıllardır web geliştiricileri, border-radius özelliğinin sınırlamalarını aşmak için clip-path, SVG maskeleri ve kırılgan geçici çözümler kullanmak zorundaydı. Artık CSS corner-shape özelliği ile bu devir sona eriyor. Bu yeni özellik, bevel (kesik), scooped (içbükey) ve squircle (Apple tarzı yumuşak kare) köşeler gibi çeşitli şekilleri mümkün kılıyor. border-radius'ın sadece yuvarlak köşeler üretebilmesine karşın, corner-shape tasarımcılara çok daha fazla esneklik sunuyor.
İlk web sitelerini oluşturmaya başladığımda, yuvarlak köşeler için her bir köşeye ayrı bir arka plan resmi, gövde için bir resim daha ve müşterinin farklı bir yarıçap istememesi için dua gerekirdi. border-radius özelliğinin gelmesiyle tüm web topluluğu rahat bir nefes almıştı. Bu, on beş yıldan uzun süre önceydi ve o zamandan beri aynı dalgada ilerliyoruz. Şimdi corner-shape ile benzer bir dönüşüm yaşıyoruz; bu özellik kademeli iyileştirme (progressive enhancement) olarak düşünülmeli.
corner-shape özelliği, border-radius ile birlikte çalışan bir tamamlayıcıdır. Tek başına bir etkisi yoktur, ancak border-radius ile birleştiğinde güçlü bir ikili oluştururlar. Özellik şu değerleri alır: round (varsayılan, normal border-radius), squircle (süper elips, Apple tarzı yumuşak kare), bevel (iki yarıçap noktası arasında düz çizgi, kesik köşe), scoop (ters eğri, içbükey köşe), notch (keskin içe doğru kesik) ve square (yuvarlamayı kaldırır). Ayrıca her köşe için farklı değerler belirleyebilirsiniz: corner-shape: bevel round scoop squircle;
Peki neden bu özelliğe 'border-shape' denmemiş? Çünkü bu özellik sadece border'lara değil, aynı zamanda outline, box-shadow ve background gibi diğer CSS özelliklerine de uygulanır. clip-path'in asla yapamadığı şey budur: clip-path ile oluşturulan şekiller border ve shadow gibi özellikler tarafından takip edilmez, ancak corner-shape ile bu sorun ortadan kalkar.
Önemli Gelişmeler
Mart 2026 itibarıyla corner-shape 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 nedenle, corner-shape'i progressive enhancement olarak kullanmak en doğru yaklaşım. İlk aşamada border-radius, clip-path veya radyal gradyan maskeleri gibi mevcut tekniklerle iyi görünen bir temel oluşturun. Ardından, @supports (corner-shape: bevel) sorgusuyla corner-shape destekleyen tarayıcılarda deneyimi yükseltin. Bu şekilde her kullanıcı en azından işlevsel ve estetik bir arayüz görür.
Uzmanların Görüşleri
Örnek olarak e-ticaret ürün kartlarındaki rozetleri ele alalım. Geleneksel yöntemde clip-path: polygon() veya döndürülmüş pseudo-elementler kullanılır, ancak bu kodlar padding değiştiğinde bozulabilir. corner-shape ile ise basit bir rozet border-radius ile başlar, corner-shape destekleyen tarayıcılarda ise bevel değeriyle şık bir kurdele şekline dönüşür. Örneğin: border-radius: 0 16px 16px 0; corner-shape: round bevel bevel round; kombinasyonu ile yönlü kurdele efekti elde edilir.
Sonuç olarak, corner-shape özelliği web tasarımında köşe şekillendirme konusunda devrim niteliğinde bir yenilik. border-radius'ın tekdüzeliğinden kurtulup bevel, squircle ve scoop gibi şekillerle daha yaratıcı UI'lar oluşturabiliriz. Henüz tüm tarayıcılarda desteklenmese de, progressive enhancement yaklaşımıyla bugünden kullanmaya başlayabiliriz. Bu özellik, CSS'in evriminde önemli bir adım ve yakında tüm tarayıcılarda yaygınlaşması bekleniyor.
Kaynak: smashingmagazine.com
