Border radius oluşturucu
Her köşeyi ayarlayın ve CSS'i kopyalayın.
- Tarayıcınızda çalışır — metniniz hiçbir yere gönderilmez
- Kayıt yok, kota yok, istediğiniz sıklıkta ücretsiz kullanın
Nasıl çalışır
border-radius, üç köşenin yuvarlak biri kare olmasını isteyene kadar basittir; o noktada herkes dört değerin sırasına bakmak zorunda kalır.
Sıra, kalıcı olarak
Sol üst, sağ üst, sağ alt, sol alt — sol üstten başlayarak saat yönünde. Aynı sol üstten saat yönü sırası margin, padding ve border kısaltmaları için de geçerlidir; bunu bir kez ezberlemeye değer.
Piksel veya yüzde
Pikseller, öğenin boyutu ne olursa olsun aynı eğriyi verir. Yüzdeler öğenin kendi genişliğine ve yüksekliğine göredir; bu yüzden eğri ölçeklenir — ve bir karede %50 yarıçap mükemmel bir daire verir; yuvarlak avatarlar için standart hile budur.
Hap şekli
Öğe yüksekliğinin yarısından büyük bir yarıçap tam olarak yarıya sabitlenir; border-radius: 999px'in yükseklik ne olursa olsun güvenilir biçimde hap şekli üretmesinin nedeni budur. Doğru değeri hesaplamaktan daha sağlamdır; çünkü içerik değiştiğinde de çalışmaya devam eder.
İç içe öğelerde köşeler yanlış göründüğünde
Yuvarlak bir kutunun içindeki yuvarlak kutunun, aralarındaki padding kadar azaltılmış daha küçük bir yarıçapa ihtiyacı vardır; aksi halde eğriler eş merkezli oturmaz. Kartların düzgün yapılmış görünmesini sağlayan küçük bir ayrıntıdır.
Border radius oluşturucu — sorular
Dört değer hangi sırada?
Sol üst, sağ üst, sağ alt, sol alt — sol üstten başlayarak saat yönünde.
Mükemmel bir daireyi nasıl yaparım?
Tam kare olan bir öğede border-radius: 50%.
Hap şeklinde bir düğmeyi nasıl yaparım?
999px gibi büyük bir değer kullanın. Tarayıcılar bunu yüksekliğin yarısına sabitler; bu yüzden her boyutta çalışır.
Piksel mi yüzde mi kullanmalıyım?
Tutarlı bir eğri için piksel; öğeyle birlikte ölçeklenmesini istediğinizde yüzde.
Her yerde çalışır mı?
Evet. border-radius, on yılı çok aşkın süredir önek olmadan desteklenmektedir.