Sınır yarıçapının ötesinde: CSS köşe şekli Özelliğinin Günlük Kullanıcı Arayüzü İçin Kilidini Açtığı Şeyler
Twitter'da paylaş, LinkedIn
Yıllardır geliştiriciler, yuvarlak köşelerden başka bir şey elde etmek için klip yolu, SVG maskeleri ve hassas geçici çözümler kullanarak border-radius sınırlamalarını aşmaya çalışıyorlar. Yeni köşe şekli özelliği nihayet bunu değiştiriyor ve kapıyı eğimli, kepçeli ve sincap köşelere açıyor. Yıllardır geliştiriciler, yuvarlak köşelerden başka bir şey elde etmek için klip yolu, SVG maskeleri ve hassas geçici çözümler kullanmanın sınırlamalarını aşmaya çalışıyorlar. Yeni mülk nihayet bunu değiştiriyor ve kapıyı eğimli, kepçeli ve sincap köşelere açıyor.
Web siteleri oluşturmaya ilk başladığımda, yuvarlatılmış köşeler, her köşe için bir tane, gövde için bir tane olmak üzere beş arka plan resmi ve müşterinin farklı bir yarıçap istemeyeceği bir dua gerektiriyordu. Daha sonra sınır yarıçapındaki mülk indi ve tüm ağ toplu olarak rahat bir nefes aldı. Bu on beş yıldan fazla zaman önceydi ve dürüst olmak gerekirse o zamandan beri aynı dalganın üzerinde ilerliyoruz. O zaman olduğu gibi, umarım bu özelliğe yavaş yavaş diğer tarayıcılara da ulaşan aşamalı bir geliştirme olarak bakabiliriz.
Sistem Güvenliği
Ben de diğer insanlar gibi iyi bir sınır yarıçapından hoşlanırım ama gerçek şu ki bu bize yalnızca tek bir şekil verir. Yuvarlak. İşte bu. Eğimli köşeler mi istiyorsunuz? Klip yolu. Bilet kenarları kepçeli mi? SVG maskesi. Squircle uygulama simgeleri? Kimsenin sizden animasyon yapmanızı istemeyeceğini umduğunuz, dikkatlice ayarlanmış bir SVG. Yıllardır kenarlık yarıçapının sınırlamalarını aşıyoruz ve bu hacklemeler gerçek ödünleşimlerle birlikte geliyor: kenarlıklar klipsli yolları takip etmiyor, gölgeler kesiliyor ve birisi dolgu değerini değiştirdiği anda kırılan kırılgan bir kodla karşılaşıyorsunuz.
Yeni köşe şekli bunların hepsini değiştiriyor.
Corner-shape özelliği border-radius'un tamamlayıcısıdır. Onun yerini almaz; sınır yarıçapının oluşturduğu eğrinin şeklini değiştirir. border-radius olmadan, köşe şekli hiçbir şey yapmaz. Ama birlikte güçlü bir çiftler.
Nasıl Önlem Alınmalı?
Özellik şu değerleri kabul eder:
round : varsayılan, normal border-radius ile aynı,
: varsayılan, normal ile aynı, sincap : süper elips, pürüzsüz Apple tarzı yuvarlak kare,
Önemli Gelişmeler
: bir süper elips, pürüzsüz Apple tarzı yuvarlatılmış kare, eğim : iki yarıçap uç noktası arasındaki düz bir çizgi (kesikli köşeler),
Detaylar ve Etkileri
: iki yarıçap uç noktası arasında düz bir çizgi (kesilmiş köşeler), kepçe : içbükey köşeler oluşturan ters bir eğri,
: içbükey köşeler oluşturan ters bir eğri, çentik : içe doğru keskin kesimler,
Sonuç ve Değerlendirme
: içe doğru keskin kesimler, kare : kenar yarıçapını geçersiz kılan yuvarlamayı etkili bir şekilde ortadan kaldırır.
Ayrıca border-radius gibi köşe başına farklı değerler ayarlayabilirsiniz:
Uzmanların Görüşleri
*köşe şekli: eğimli yuvarlak kepçe sincap; /* sol üst, sağ üst, sağ alt, sol alt */
Ayrıntılı kontrol için superellipse() işlevini sayısal bir parametreyle de kullanabilirsiniz.
Gelecekte Ne Bekleniyor?
.element { sınır yarıçapı: 25 piksel; köşe şekli: süper elips(0); /* 'eğim'e eşit */ }
Öyleyse buradaki soru şu olabilir: neden bu özelliğe "sınır şekli" adını vermiyorsunuz? Her şeyden önce bu, yakında üzerinde çalışacağımız tamamen farklı bir şey. İkincisi, ana hatlar, kutu gölgeleri ve arka planlar gibi kenarlıklardan biraz daha fazlası için geçerlidir. Clip-path özelliğinin asla yapamayacağı şey budur.
Teknik Analiz
Aşamalı Geliştirme Burada Neden Önemlidir?
Bu yazının yazıldığı sırada (Mart 2026), köşe şekli yalnızca Chrome 139+ ve diğer Chromium tabanlı tarayıcılarda desteklenmektedir. Bu önemli bir kullanıcı kitlesidir, ancak kesinlikle herkes değil. Cazibe, ya mülk her yerde olana kadar görmezden gelmek ya da onsuz dağılan demolar oluşturmaktır.
Her iki yaklaşımın da doğru olduğunu düşünmüyorum. Bana göre köşe şekli, tıpkı Internet Explorer 6 çağında border-radius'un olduğu gibi, aşamalı iyileştirme için mükemmel bir adaydır. Temel çizgi, border-radius, klip-path, radyal-gradyan maskeleri gibi zaten bildiğimiz teknikleri kullanmalı ve kasıtlı olarak iyi görünmelidir. Ardından köşe şeklini destekleyen tarayıcılar için deneyimi yükseltiriz. Bazen bu, daha temel bir varsayılanın sağlanması kadar basit olabilir; bazen biraz daha fazla olması gerekebilir.
Bu makaledeki her demo, bu ilerici geliştirme fikriyle oluşturulmuştur. Demoların yapısı şöyle görünür:
@katman tabanı, sunum, demo;
Sunum katmanı, kanıtlanmış tekniklerin kullanıldığı tamamen cilalanmış kullanıcı arayüzünü içerir. Demo katmanı @supports içindeki her şeyi sarar:
@katman demosu { @destekler (köşe -shape: bevel) { /* stilleri burada yükseltin */ } }
Yedek banner yok, "tarayıcınız bunu desteklemiyor" mesajı yok. Yalnızca iki tasarım katmanı: iyi ve daha iyi. Sadece birkaç örnek göstermenin güzel olabileceğini düşündüm. Halihazırda birkaç tane var ama umarım bunların üstüne biraz daha ilham verebilirim.
Demo 1: Şerit Rozetli Ürün Kartları
Her e-ticaret sitesinde bunlara sahiptir: ürün kartının köşesine iliştirilmiş küçük "Yeni" veya "İndirim" rozetleri. Geleneksel olarak, bu şerit şeklini elde etmek, klip yoluna ulaşmak anlamına gelir: polygon() veya döndürülmüş bir sözde öğeye, hadi buna, biri dolgu değerini değiştirdiği anda dağılma şansına sahip olan "ilk kod" diyelim.
Ama olay şu: taban çizgisinde şerit şekline ihtiyacımız yok. Köşeleri hafifçe yuvarlatılmış basit bir rozet de aynı hikayeyi anlatıyor ve son derece güzel görünüyor:
.product__badge { kenarlık yarıçapı: 0 4px 4px 0; arka plan rengi: var(--badge-bg); }
İşte bu. Kartın sol kenarına yaslanmış küçük, temiz bir etiket. Hiçbir şey süslü değil, hiçbir şey kırık değil. Her tarayıcıda çalışır.
Köşe şeklini destekleyen tarayıcılar için şunları geliştirdik:
@layer demo { /* Tarayıcı `köşe şeklini' destekliyorsa */ @destekler (köşe şekli: eğim) { .ürün { border-radius: 40px; köşe şekli: sincap; } .product__badge { dolgu: 0,35rem 1,4rem 0,35rem 1rem; kenarlık yarıçapı: 0 16 piksel 16 piksel 0; köşe şekli: yuvarlak konik konik yuvarlak; } } }
Yuvarlak eğimli eğimli yuvarlak kombinasyon yönlü bir şerit oluşturur. Kartın kenarıyla buluştuğu yerde yuvarlak, diğer tarafta bir noktaya eğimli. Klip yolu yok, sözde eleman hilesi yok. Kenarlıklar, gölgeler ve arka planların tümü belirtilen şekli takip eder çünkü bu şekildir.
Kartların kendileri kenar yarıçapından: 12 pikselden daha büyük bir boyuta ve standart yuvarlamanın kıyaslandığında biraz çarpık görünmesini sağlayan pürüzsüz süper elips eğrisi olan sincap köşe şekline yükseltilir. Tasarımcılar bunu hemen fark edeceklerdir. Diğer herkes bunun "daha kaliteli hissettirdiğini" söyleyecektir.
Önemli ipucu: Kart bileşenlerinde sincap değerinin kullanılması, öncesi ve sonrası arasındaki farkın tek başına hafif olabileceği ancak sayfanın tamamında dönüştürücü olabileceği yükseltmelerden biridir. Bu iOS etkisidir: Her şey süper elips eğrileri kullandığında, düz dairesel yaylar yersiz görünmeye başlar. Bu demoda biraz abarttım.
Utilitybend'in Kalemine [Köşe Şekli: Etiketler [çatallı]](https://codepen.io/smashingmag/pen/GgjNwQE) bakın. Bkz. Kalem Köşesi şekli: Utilitybend tarafından [çatallı] etiketler.
Bu “bileşen kütüphanesi demosu”, köşe şeklini gösteren sadece kahraman bölümleri için değil. Pratik, günlük kullanıcı arayüzü: sağlam düğmeler, özetlenen düğmeler, durum etiketleri, yön okları, bildirim rozetleri.
Kurulum kasıtlı olarak temizdir. Standart kenarlık yarıçapı: Parlak yazı tipine sahip 10 piksellik düğmeler. Her şey çalışıyor, her şey profesyonel görünüyor. Bunu tereddüt etmeden yapabilirsiniz.
Köşe şeklindeki katman onu bir vitrine dönüştürüyor. Her düğme türü, neyin mümkün olduğunu göstermek için kendi şeklini alır:
@layer demosu { @destekler (köşe şekli: eğim) { .btn--birincil { köşe şekli: eğim; geçiş: köşe şeklinde 0,3 saniyelik kolaylık; &:hover { köşe şekli: sincap; } } .btn--ikincil { kenarlık yarıçapı: 25px; köşe şekli: süper elips(0,5); } .btn--tehlike { kenarlık yarıçapı: 16px; köşe şekli: sincap; } .btn--çentik { kenarlık yarıçapı: 12px; köşe şekli: çentik; } .btn--scoop { kenarlık yarıçapı: 14px; köşe şekli: kepçe; } } }
Birincil düğme eğimli, yönlü ve mücevher benzeri bir şekilde başlar ve fareyle üzerine gelindiğinde kıvrılarak yumuşar. Köşe şekli değerleri superellipse() eşdeğerleri aracılığıyla canlandırıldığından geçiş düzgündür. Bu, eskiden ulaşılması zor olan ancak artık tek bir özellik haline gelen eğlenceli bir etkileşimdir (tabii ki border-radius ile birlikte kullanılır).
İkincil düğme, standart daire ile sincap arasında bir değer olan süper elips(0,5) değerini kullanır ve ayırt edici hap benzeri bir şekil için daha büyük bir kenarlık yarıçapıyla birleştirilir. Tehlike butonu daha geniş bir yarıçapa sahip daha belirgin bir sincap şekline kavuşuyor. Ve çentik ve kepçenin her biri kendi keskin veya içbükey kişiliğini beraberinde getirir.
Düğmelerin ötesinde, durum etiketleri köşe şeklini alır: çentik, onlara makine damgalı bir görünüm veren keskin içe doğru kesimler. Yön oku etiketleri, eskiden klip yolu gerektiren şeyin yerine yuvarlak eğimli eğimli yuvarlak (ve geri ok için bunun tersini) kullanır: polygon() . Artık sınırlar ve gölgeler tüm eyaletlerde doğru şekilde çalışıyor.
Demo 3: Referans Kartları
Bu demo muhtemelen benim en sevdiğim demodur. Temelde bunlar sadece referans niteliğindedir. Öne çıkan kartta serif tipografi, kumlu bir palet ve kavisli köşeler içeren rd'ler. Tasarım dili kasıtlı olarak temiz geometrik düğmeler demosundan farklıdır ve mesele de budur. köşe şekli yalnızca ekstra "kenar" ekler.
Temel, standart sınır yarıçapı: 16px kartlardır. Öne çıkan referans, ince bir degrade ve dekoratif açık tırnak işaretiyle tam genişliğe yayılıyor. Normal kartlar iki sütunlu bir ızgarada dönüşümlü olarak yer alır. Zaten premium bir pazarlama sitesinden alınmış bir şeye benziyor.
Köşe şeklindeki katman karakter katar:
@layer demosu { /* Aşamalı geliştirme */ @destekler (köşe şekli: kepçe) { .testimonial { border-radius: 20px; köşe şekli: sincap; } .testimonial--featured { border-radius: 24px; köşe şekli: kepçe; } .testimonial:not(.testimonial--featured):nth-child(even) { köşe şekli: kepçe turu; } .testimonial__avatar { sınır yarıçapı: %28; köşe şekli: sincap; } } }
Öne çıkan kart, dört tarafı da içbükey, tam yuvarlak köşelere sahip olup, serif tipografisine uygun, organik, neredeyse el yapımı bir his yaratıyor. Çift numaralı kartlar, herhangi bir ekstra işaretleme olmadan her birine biraz farklı bir kişilik kazandırarak genel turu karıştırır.
Yazarın avatarları dairelerden sincap şekline geçer. Onu biraz daha “farklı” kılan küçük bir dokunuş.
Önemli ipucu: köşe şekli: kepçe, serif yazı tipleri ve sıcak renk paletleriyle güzel bir şekilde eşleşir. İçbükey eğriler, editoryal tasarımda, kaligrafide ve baskı düzenlerinde bulunan organik şekilleri yansıtıyor. Geometrik sans-serif tasarımlar için sincap veya eğimi kullanın.
Utilitybend tarafından kaleme bakın [Köşe şekli: Görüşler [çatallı]](https://codepen.io/smashingmag/pen/RNGoqvZ). Kalem Köşesi şekline bakın: Utilitybend tarafından yapılan referanslar [çatallı].
Demo 4: Fiyatlandırma Kartları
Her SaaS sitesinin bir fiyatlandırma sayfasına ihtiyacı vardır ve görsel hiyerarşi sorunu her zaman aynıdır: diğerlerinin ihmal edildiğini hissetmeden bir planın öne çıkmasını sağlayın. Bu demo köşe şekliyle sorunu çözüyor.
Bu, son demoya oldukça benziyor çünkü henüz köşe şeklini desteklemeyen tarayıcılar için bir kez daha güzel bir temele sahibiz. Öne çıkan planın sıcak degrade arka planı, daha güçlü bir çerçeve ve "En Popüler" rozetiyle öne çıktığı arka arkaya üç kartımız var.
İyileştirme bunu daha da ileriye taşıyor:
@katman demosu { @destekler (köşe şekli: sincap) { .plan { border-radius: 20px; köşe şekli: sincap; } .plan--özellikli { border-radius: 24px; köşe şekli: kepçe; } .plan__badge { satır içi satır içi başlangıç: %50; çevir: -%50 0; satır içi dolgu: 1,2rem; kenarlık yarıçapı: 10 piksel; köşe şekli: eğim; } .plan__cta { sınır yarıçapı: 12px; köşe şekli: sincap; } } }
Normal planlar bu premium his için sincap gibi görünüyor. Öne çıkan plan, onu komşularından hemen ayıran geniş, içbükey köşelere sahip. "En Popüler" rozeti kendini ortalar ve köşe şeklini alır: eğimli, karta iliştirilmiş bir mücevher hissi veren mücevher benzeri, yönlü bir şekil oluşturur. CTA düğmeleri, kart diline uyacak şekilde sincap şeklindedir.
Bu demoda hoşuma giden şey, şekil hiyerarşisinin içerik hiyerarşisini nasıl yansıttığıdır. En önemli unsur (özellikli plan) en belirgin şekli (kepçe) alır. Rozet en keskin şekli alır (eğim). Geriye kalan her şey daha basit bir yükseltmeye (sincap) kavuşuyor. Şekil, yalnızca dekorasyon için değil, görsel vurgu için de bir araç haline geliyor.
Utilitybend tarafından kaleme bakın [Köşe şekli: Fiyatlandırma [çatallı]](https://codepen.io/smashingmag/pen/vEXyQMZ). Kalem Köşesi şekline bakın: Utilitybend'e göre fiyatlandırma [çatallı].
Son demo, albüm kapağı, oynatma kontrolleri, tür etiketleri ve dinleme kuyruğu içeren bir müzik çalar için sıcak, karanlık bir kullanıcı arayüzüdür. Bu, görsel olarak en karmaşık demodur ve köşe şeklinin, tek bir uyumlu tasarım içinde birçok farklı öğe türü üzerinde nasıl çalıştığını gösterir.
Bu sefer oklch(18% 0.015 40) üzerine kurulu koyu ve sıcak bir paleti ve baştan sona standart yuvarlatılmış köşeleri tercih ettim. Albüm resmi border-radius: 12px, sıra öğeleri border-radius: 12px, tür etiketleri border-radius: 5px alır. İyi görünüyor. Eksiksiz, gösterişli bir oyuncu.
Ve sonra bir kez daha bazı geliştirmeler ekliyoruz:
@katman demosu { @destekler (köşe şekli: sincap) { .now-playing { border-radius: 20px; köşe şekli: sincap; } .now-playing__art { kenarlık yarıçapı: 16px; köşe şekli: sincap; } .now-playing__swatch { kenarlık yarıçapı: %26; köşe şekli: sincap; } .queue-item { kenarlık yarıçapı: 14px; köşe şekli: yuvarlak kepçe; } .tag { kenarlık yarıçapı: 8px; köşe şekli: eğim; } } }
Oyuncu kartı ve albüm kapağı aynı şekilde sincap şeklindedir uygulama simgeleri ve albüm küçük resimleri için kullanılan eğriler. Albüm resmi renk örnekleri kenarlık yarıçapından: %22'den %26'lık düzgün bir yuvarlak çizgiye doğru gider; bu, dinlerken baktığınız görsel öğelerde ince ama anlamlı bir farktır.
Kuyruk öğeleri yuvarlak bir şekilde alınır ve bunun sonucunda sol üst ve sol altta içbükey köşeler, sağda ise yuvarlak olur. Düzeni zorlamadan her sıraya farklı bir his verir. Tür etiketleri bu keskin his için eğim alır.
Oynat düğmesi aynı zamanda köşe şeklini alır: mevcut kenarlık yarıçapında sincap: albüm kapaklarına sığacak şekilde %50. Yüzeyde fark neredeyse hiç fark edilmiyor ancak oyuncunun genel hissine katkıda bulunuyor.
Utilitybend'in kalemine bakın [Köşe şekli: Müzik çalar [çatallı]](https://codepen.io/smashingmag/pen/ogzYQRB). Kalem Köşesi şekline bakın: Utilitybend tarafından [çatallı] müzik çalar.
Yazım itibarıyla köşe şekli Chrome 139+ ve Chromium tabanlı tarayıcılarda mevcuttur. Firefox ve Safari henüz bunu desteklemiyor. Spesifikasyon, bu yazının yazıldığı an itibariyle bir W3C Çalışma Taslağı olan CSS Kenarlıkları ve Kutu Süslemeleri Modülü Seviye 4'te bulunmaktadır.
Pratik kullanım için bu iyi. Bu demoların nasıl oluşturulduğunun asıl amacı budur. Sunum katmanı her tarayıcıya gösterişli, eksiksiz bir kullanıcı arayüzü sunar. Demo katmanı, tarayıcıları desteklemek için @supports (köşe şekli: ...) içine sarılmış bir bonustur. Border-radius'un yalnızca Firefox'ta mevcut olduğu bir dönemde yaşadım. Bir noktada, her web sitesinin her tarayıcıda tamamen aynı görünmesi gerekmediğini unutmuş gibiyiz. Gerçekten istediğimiz şey şu: "bozuk" düzenler ve "tarayıcınız bunu desteklemiyor" mesajları yok; bunun yerine işe yarayan ve giderek daha fazla keyif katan güzel bir deneyim. Başka bir deyişle, tasarımın iki katmanıyla çalışıyoruz: iyi ve daha iyi.
Sürekli olarak geri döndüğüm yaklaşım şu: köşe şekline göre tasarım yapmayın ve onun eksikliğine göre tasarım yapmayın. Kenar yarıçapına sahip sağlam bir taban çizgisi tasarlayın ve ardından onu geliştirin. Her demodaki sunum katmanı kasıtlı olarak iyi görünüyor. Daha iyi bir tarayıcıyı bekleyen, bozulmuş bir sürüm değil. Tam bir tasarım. Demo katmanı, sınır yarıçapının tek başına ifade edemeyeceği bir boyut ekler.
Köşe şekliyle ilgili beni en çok şaşırtan şey sunduğu çeşitliliktir - bu tek özellik ile sahip olduğumuz inanılmaz güç: bu birinci sınıf için sincap, kartlarda ve avatarlarda süper elips hissi; yön elemanları ve mücevher benzeri rozetler için eğim; editoryal sıcaklık ve görsel hiyerarşi için kepçe; etiketlerde mekanik hassasiyet için çentik; ve yuvarlak ve squircle arasında hassas kontrol için superellipse(). Ve değerleri köşe başına karıştırma yeteneği (yuvarlak eğimli eğimli yuvarlak, kepçe yuvarlak), SVG maskeleri veya klip yolu kesmeleri gerektirecek şekillerin önünü açar.
Beş arka plan görüntüsünden kenarlık yarıçapına ve köşe şekline geçtik. Her adımda bir geçici çözüm kategorisi kaldırıldı. Tasarımcıların bununla neler yapacağını görmek beni heyecanlandırıyor.
