CSS Border Radius Generator

border-radius değerleri hangi sırayla yazılır?

border-radius bir kısayoldur ve arkasında dört ayrı özellik durur: border-top-left-radius, border-top-right-radius, border-bottom-right-radius ve border-bottom-left-radius. Kısayola yazdığın değerler de tam bu sırayla, yani sol üst köşeden başlayıp saat yönünde okunur. Buradaki en yaygın yanılgı, değerlerin margin ve padding’teki gibi üst, sağ, alt, sol diye okunduğunu sanmaktır. border-radius kenarları değil köşeleri sayar.

Kaç değer yazdığına göre eksik kalan köşeler karşısındakinden kopyalanır. Tek değer yazarsan dört köşe de aynı olur. İki değer yazarsan birincisi sol üst ile sağ alta, ikincisi sağ üst ile sol alta gider. Üç değer yazarsan sırayla sol üst, sonra sağ üst ile sol alt, sonra sağ alt belirlenir. Dört değer yazdığında ise her köşe tek tek tanımlanmış olur.

Kısayol biçimleri

Eğik çizgi ne işe yarar, eliptik köşe nedir?

Varsayılan olarak her köşe bir çeyrek dairedir, çünkü yatay ve dikey yarıçap eşittir. Yazıma bir eğik çizgi eklediğinde değerler ikiye ayrılır: çizginin solundakiler yatay yarıçapları, sağındakiler dikey yarıçapları belirler. Böylece her köşe çeyrek daire değil çeyrek elips olur ve toplamda sekiz sayıyı ayrı ayrı kontrol edersin.

Organik, damla görünümlü şekillerin hepsi bu yazımla yapılır. Dört değerli kısa biçim tek başına böyle bir şey üretemez, çünkü her köşeyi simetrik bir yay olmaya zorlar. Eğik çizginin iki tarafı birbirinden bağımsız kısaltılabilir: 50% / 30% 70% geçerli bir yazımdır, solda tek değer dört köşeye, sağda iki değer köşe çiftlerine dağılır.

px ile yüzde arasındaki gerçek fark

px sabit bir uzunluktur. 12px’lik bir köşe, kutu ister 100 ister 1000 piksel genişlikte olsun aynı kalır. Tasarım sistemlerinin ve bileşen kütüphanelerinin neredeyse tamamı bu yüzden px kullanır: aynı görsel dil her ölçüde korunur ve bileşen esnerken köşe şekil değiştirmez.

Yüzde ise kutunun kendi ölçüsüne bağlıdır. En çok gözden kaçan nokta şudur: yatay yarıçap kutunun genişliğinin yüzdesi, dikey yarıçap ise yüksekliğinin yüzdesidir. Kutu kare olduğu sürece ikisi aynı sayıyı verir ve köşe daire gibi görünür. Kutu 320x80 olduğunda yüzde 20 yatayda 64 piksel, dikeyde 16 piksel eder ve köşe belirgin biçimde yassılaşır. Aracın önizleme kutusunun genişliğini ve yüksekliğini ayrı ayrı değiştirebilmesinin sebebi tam olarak budur: yüzdeli bir köşeyi yalnızca kare kutuda test edersen sürprizi ancak üretimde görürsün.

Hap biçimi için neden 9999px?

Bir düğmeyi ya da etiketi tam hap biçimine sokmak isteyince ilk akla gelen değer yüzde 50 oluyor, ama bu yanlış sonuç verir. Yüzde 50 yatayda genişliğin yarısını, dikeyde yüksekliğin yarısını yarıçap yapar; kutu geniş ve alçaksa ortaya hap değil, iki ucu sivrilmiş bir elips çıkar.

Doğru kalıp, kutudan güvenle büyük bir piksel değeri yazmaktır: 9999px. Tarayıcı yarıçaplar kutuya sığmadığında hepsini aynı oranda küçültür, sonuçta yarıçap kutunun yüksekliğinin tam yarısında durur ve uçlar kusursuz yarım daire olur. 999px ya da 100vmax da aynı işi görür; önemli olan sayının kendisi değil, kutudan büyük olmasıdır.

Yarıçaplar çakışınca tarayıcı ne yapar?

Bir kenar üzerindeki iki yarıçapın toplamı o kenarın uzunluğunu aşarsa şekil kendi kendini keserdi. Şartname bunu önlemek için net bir kural koyar: tarayıcı her kenar için kenar uzunluğunun o kenardaki iki yarıçapın toplamına oranını hesaplar, bu oranların en küçüğünü bulur ve değer birden küçükse tüm yarıçapları o katsayıyla çarpar.

Kritik ayrıntı, ölçeklemenin tek bir köşeye değil hepsine birden uygulanmasıdır. Yani bir köşeye aşırı büyük bir değer verdiğinde yalnızca o köşe değil, şeklin bütün köşeleri küçülür. 9999px kalıbının her kutu ölçüsünde tutarlı çalışmasının sebebi de bu kuraldır.

Köşeler, taşan içerik ve kenarlıklar

border-radius yalnızca elemanın kendi arka planını ve kenarlığını kırpar. İçerideki çocuk elemanlar, mutlak konumlanmış katmanlar ya da bir video köşeden taşmaya devam eder. Bunları da kırpmak istiyorsan kapsayıcıya overflow: hidden vermen gerekir, ama bunun bedeli vardır: aynı kutuda box-shadow dışarı taşamaz, position: sticky çalışmayı bırakabilir ve açılır menüler kapsayıcının içinde kesilir.

Arka planın nereye kadar uzanacağını background-clip belirler. Varsayılan border-box arka planı kenarlığın altına kadar götürür, dolayısıyla yarı saydam bir kenarlık kullanıyorsan arka plan kenarlığın içinden görünür. padding-box bunu keser. Kenarlık kalınlıkları bir köşede eşit değilse tarayıcı iki kalınlık arasında yumuşak bir geçiş çizer, bu yüzden köşedeki eğri beklediğinden farklı durabilir.

İç içe kutularda ise küçük bir hesap gerekir: iç kutunun yarıçapı, dış yarıçaptan iç boşluk kadar küçük olmalıdır. Dış kutu 16px yarıçaplı ve 8px iç boşluğa sahipse içteki kutuya 8px vermek iki eğriyi eş merkezli tutar. İkisine de 16px verirsen iç köşe dış köşeden daha yuvarlak görünür ve aradaki boşluk köşelerde garip biçimde açılır.

Squircle neden CSS ile tam olarak çizilemez?

iOS simgelerinin ve son yıllarda pek çok arayüzün kullandığı squircle aslında bir süperelipstir. Düz kenardan eğriye geçiş ani değil süreklidir; gözün yumuşak omuz olarak algıladığı şey buradan gelir. border-radius ise her köşeye bir daire ya da elips yayı yerleştirir, dolayısıyla kenarla eğrinin birleştiği noktada eğrilik birden sıçrar. Yan yana koyduğunda fark küçüktür ama gözle seçilir.

Bugüne kadarki çözümler SVG yolu, clip-path ya da maske kullanmak oldu. CSS tarafında ise corner-shape özelliği üzerinde çalışılıyor: corner-shape: superellipse(...) yazıldığında köşenin daire değil süperelips yayı olması hedefleniyor. Tarayıcı desteği daha yeni yayılmaya başladığı için üretimde en pratik yol hâlâ eliptik yarıçaplarla yaklaşık bir sonuç almak.

Sık yapılan hatalar

• Hap biçimi için yüzde 50 yazmak. Kutu kare değilse sonuç hap değil, elips olur.
• Kısayolu kenar sırasıyla okumak. Değerler sol üstten başlar ve saat yönünde ilerler.
• İç içe kutularda aynı yarıçapı tekrarlamak. İçtekinin değeri iç boşluk kadar küçük olmalı.
• overflow: hidden’ı refleks olarak eklemek. Kırpma gerekmiyorsa gölgeleri ve sticky davranışını boşuna kaybedersin.
• Yüzdeli köşeleri yalnızca kare kutuda denemek. Bileşen bir yerde uzayınca köşe bambaşka görünür.

Köşeleri ayarladıktan sonra aynı kutunun arka planıyla da oynamak istersen CSS gradyan oluşturucu ile ürettiğin gradyanı buradaki önizlemeye taşıyıp iki ayarı birlikte görebilirsin.