Ücretsiz çevrimiçi CSS border-radius önizleme. Her köşeyi ayrı ayrı ayarlayın, gerçek zamanlı önizleme. Kodu kopyalayın. Tarayıcıda işlenir.
Bu sayfayı yer imlerine eklemek için Ctrl+D tuşlarına basın
Border Radius Önizleyici; CSS border-radius özelliğini görsel olarak ayarlayan ücretsiz bir çevrimiçi araçtır.
Tam bir daire oluşturmak için kare bir öğeye border-radius: 50% uygulayın. Dört köşenin tamamını 50% olarak ayarlayın.
Evet, border-radius şu sırayla dört ayrı değere sahip olabilir: sol üst, sağ üst, sağ alt, sol alt. Bu, benzersiz asimetrik şekillere olanak tanır.
Düğmelerde altı ila on iki piksel, kartlarda sekiz ila on altı piksel çoğu arayüzde iş görür. Tam sayıdan çok tutarlılık önemlidir: aynı ekrandaki düğmelerle giriş alanları farklı yarıçaplar taşıyorsa düzen dağınık okunur. Bir kartın içinde görsel varsa, iç ögeye dıştakinden biraz küçük bir yarıçap verin; yoksa iki eğri gözle görülür biçimde uyuşmaz.
%50, "her kenarın yarısı" demektir; öge kare değilse yatay ve dikey yarıçaplar farklılaşır ve elips çıkar. Gerçek bir daire için width ile height'a aynı değeri verin ya da aspect-ratio: 1 ekleyin. Genişliği metnine göre değişen bir düğmeye hap biçimi vermek istiyorsanız %50 yerine 9999px gibi büyük sabit bir değer kullanın; uçlar o zaman her yükseklikte kusursuz yarım daire kalır.