Yıllardır web geliştiricileri, border-radius'ın sınırlamalarıyla boğuşuyor. Yuvarlak köşe dışında bir şey elde etmek için clip-path, SVG maskeleri ve kırılgan geçici çözümler kullanmak zorunda kalıyorduk. Artık bu dönem sona eriyor. CSS'in yeni corner-shape özelliği, bevel (kesik), squircle (elma tarzı yumuşak kare), scoop (içbükey) ve çentikli köşeler gibi seçenekler sunarak tasarımcılara ve geliştiricilere benzeri görülmemiş bir esneklik kazandırıyor. Bu makalede, corner-shape özelliğinin ne olduğunu, nasıl çalıştığını ve gündelik UI projelerinde nasıl devrim yaratabileceğini keşfedeceğiz.
border-radius özelliği 15 yılı aşkın süredir web'deki tek köşe yuvarlama aracıydı. Ancak sadece yuvarlak köşe üretebiliyor olması, tasarımcıları sürekli olarak alternatif arayışına itti. Kare köşeler için clip-path, bilet kesikli köşeler için SVG mask, uygulama ikonları için squircle şekli ise özel SVG'ler gerektiriyordu. Tüm bu geçici çözümler, gölgelerin kesilmesi, kenarlıkların clip-path'i takip edememesi ve kodun değişikliklere karşı kırılgan olması gibi ciddi dezavantajlar barındırıyordu. corner-shape işte tam bu noktada devreye giriyor.
corner-shape özelliği, border-radius'ın yerini alan değil, onunla birlikte çalışan bir tamamlayıcıdır. border-radius olmadan hiçbir etkisi yoktur, ancak birlikte kullanıldıklarında güçlü bir ikili oluştururlar. Özellik şu değerleri alır: round (varsayılan, normal border-radius), squircle (Apple tarzı süper elips), bevel (düz kesik köşe), scoop (içbükey kavis), notch (sivri içe kesik) ve square (köşeyi tamamen kaldırır). Ayrıca, her köşe için farklı değerler atamak mümkündür: corner-shape: bevel round scoop squircle; gibi. superellipse() fonksiyonu ile de ince ayar yapılabilir.
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 herkesi kapsamıyor. Bu noktada doğru yaklaşım, özelliği tamamen yok saymak ya da ona bağımlı kırılgan demolar oluşturmak değil, progressive enhancement (aşamalı iyileştirme) stratejisi uygulamaktır. Tıpkı border-radius'ın Internet Explorer 6 döneminde olduğu gibi, corner-shape da temel tarayıcılarda çalışan bir taban ve destekleyen tarayıcılarda gelişmiş bir deneyim sunmak için idealdir.
Önemli Gelişmeler
Progressive enhancement yaklaşımında, önce her tarayıcıda çalışan bir temel tasarım oluşturulur. Örneğin, bir ürün kartı rozeti için basit bir border-radius yeterlidir. Ardından, @supports (corner-shape: bevel) sorgusu ile corner-shape destekleyen tarayıcılar için gelişmiş stiller eklenir. Bu sayede, hiçbir kullanıcı 'tarayıcınız desteklemiyor' mesajıyla karşılaşmaz; herkes için iyi, destekleyenler için daha iyi bir deneyim sunulur. Bu yaklaşım, kodun sağlamlığını ve bakımını kolaylaştırır.
Detaylar ve Etkileri
corner-shape özelliğinin en heyecan verici yanı, uzun yıllardır clip-path gibi yöntemlerle yapılan ancak border, box-shadow ve outline gibi özelliklerle uyumsuz olan şekilleri artık doğrudan CSS ile yapabilmesidir. Örneğin, bir ürün kartına squircle köşe vermek, hem kenarlığı hem de gölgeyi sorunsuz bir şekilde takip eder. Ayrıca, ribbon (kurdela) şeklindeki rozetler, bevel değeri ile tek bir satırda oluşturulabilir: border-radius: 0 16px 16px 0; corner-shape: round bevel bevel round;. Bu, daha önce clip-path ile sayfalarca kod gerektiren bir işlemi saniyelere indirir.
Günlük UI tasarımında corner-shape ile yapılabilecekler sınırsız. E-ticaret kartları, bildirim rozetleri, uygulama ikonları, butonlar ve daha fazlası. Özellikle squircle değeri, Apple'ın yıllardır kullandığı yumuşak köşeli kare ikonları artık saf CSS ile oluşturma imkanı veriyor. Ayrıca, scoop ve notch değerleri ile yaratıcı içbükey ve çentikli tasarımlar yapılabilir. Tüm bunlar, daha önce SVG veya JavaScript gerektiren işlemleri basit CSS koduna dönüştürüyor.
Nasıl Önlem Alınmalı?
corner-shape özelliği, CSS'in evriminde önemli bir adım. border-radius'ın tekdüzeliğine son vererek tasarımcılara ve geliştiricilere yeni bir ifade özgürlüğü sunuyor. Henüz tüm tarayıcılarda desteklenmese de, progressive enhancement stratejisi ile bugünden kullanılmaya başlanabilir. Gelecekte, bu özelliğin her yerde destekleneceği günlerde, web tasarımında köşelerin sınırları tamamen kalkacak. Şimdiden bu yeni dünyaya adım atmak, projelerinizi bir adım öne taşıyacaktır.
Kaynak: smashingmagazine.com
