Sekiz değer neyi ifade eder?
border-radius aslında dört köşe için sekiz sayı taşır. Eğik çizgiden önceki dört değer köşelerin yatay, sonraki dört değer dikey yarıçapıdır ve sıralama saat yönündedir: sol üst, sağ üst, sağ alt, sol alt. Bu iki grup aynı olduğunda köşe dairesel, farklı olduğunda eliptik olur. Organik blob biçimlerinin sırrı budur — dört köşede farklı elipsler kullanıldığında kenarlar sürekli akan bir eğriye dönüşür. Tek değer yazıldığında ise sekiz sayının hepsi aynı kabul edilir.
Yüzde mi, piksel mi?
Yüzde değerleri kutunun kendi ölçüsüne göre çözülür: yatay yarıçap genişliğin, dikey yarıçap yüksekliğin yüzdesidir. Bu yüzden yüzdeyle tanımlanan bir biçim kutu boyutu değiştikçe oranını korur ve blob biçimleri hep yüzdeyle yazılır. Buna karşılık düğme, kart ve giriş alanı gibi bileşenlerde piksel ya da rem tercih edilir; aksi hâlde geniş bir düğmenin köşesi dar olandan farklı görünür. Tam yuvarlak bir uç isteniyorsa 50% yerine 999px gibi büyük bir piksel değeri yazmak daha güvenlidir: yarıçaplar kutuya sığmadığında tarayıcı hepsini aynı oranda küçültür, sonuç her boyutta düzgün bir kapsül olur.
Dikkat edilecek noktalar
Yuvarlatma yalnızca öğenin kendi arka planını ve kenarlığını keser; içindeki bir görsel ya da tablo köşeden taşmaya devam eder. Çocuk içeriğin de kesilmesi için kapsayıcıya overflow: hidden eklemek gerekir. Bir başka ayrıntı, iç içe kutularda dış ve iç yarıçapın eşit yazılmasıdır: görsel olarak doğru duran iç köşe, dış yarıçaptan aradaki dolgu kadar küçük olmalıdır. Gölge, ana hat (outline) ve odak halkası yuvarlatmayı kendiliğinden izler; ana hatlar için outline-offset ile aradaki boşluğu ayarlayabilirsiniz. Ürettiğiniz biçimi gölge üreticisiyle birleştirdiğinizde kartın nihai görünümünü tek adımda görebilirsiniz.