CSS border radius oluşturucu
CSS border radius oluşturucu ile tüm köşelerin yuvarlaklığını tek seferde veya her köşeyi ayrı ayrı, piksel ya da yüzde olarak ayarlayın; isterseniz yatay ve dikey yarıçapları ayrı vererek eliptik yapın. Araç değeri en kısa geçerli biçimde yazar, dört uzun özelliği listeler ve kutu boyutunuzda tarayıcının gerçekte hangi yarıçapları kullandığını hesaplar.
Nasıl hesaplanır?
Tarayıcı border-radius’u nasıl okur?
Border radius nedir? Kutunun köşelerini yuvarlayan CSS özelliğidir. Kısa yazımı bir ile dört arasında değeri sol üst, sağ üst, sağ alt, sol alt sırasıyla – saat yönünde – alır. Eksik değerler margin’deki gibi tamamlanır:
| Değer | Anlamı |
|---|---|
12px | dört köşenin hepsi 12 px |
24px 8px | sol üst ve sağ alt 24 px, sağ üst ve sol alt 8 px |
24px 8px 4px | sol üst 24 px, sağ üst ve sol alt 8 px, sağ alt 4 px |
40px 10px / 20px 5px | eliptik: eğik çizgiden önce yatay, sonra dikey yarıçaplar |
Araç her girdiyi en kısa eşdeğer biçime indirir: 10px 10px 10px 10px, 10px olur; aynı değerli eğik çizgi kaldırılır.
Yüzdeler: genişlik ve yükseklik ayrı
Yüzdeler yatayda kutunun genişliğine, dikeyde yüksekliğine göre hesaplanır. Bu yüzden 50% bir kareyi daireye, 240 × 160 px’lik bir dikdörtgeni ise 120 px ve 80 px yarıçaplı bir elipse dönüştürür. Dikdörtgende dairesel bir köşe için piksel kullanın.
Eğriler üst üste bindiğinde
Komşu iki yarıçapın toplamı paylaştıkları kenardan uzunsa, W3C spesifikasyonu tarayıcının tüm yarıçapları aynı f = min(kenar uzunluğu ÷ o kenardaki iki yarıçapın toplamı) katsayısıyla ölçeklemesini ister.
“Hap” şekli örneği 200 × 40 px’lik bir düğmede border-radius: 9999px: solda ve sağda toplam 40 px yüksekliğe karşı 9999 + 9999 = 19.998 px, yani f = 40 ÷ 19.998 ≈ 0,002. Her köşe 9999 × f = 20 px alır – yüksekliğin tam yarısı; uçlar kusursuz yarım daire olur. “Kullanılan yarıçaplar” bu değerleri kutunuz için gösterir.
Sıkça sorulan sorular
CSS ile daire nasıl yapılır?
Kare bir öğeye border-radius: 50% verin. Dikdörtgende %50 bir elips oluşturur; yuvarlak uçlar (hap şekli) için 9999px gibi çok büyük bir piksel değeri kullanın.
border-radius’taki eğik çizgi ne anlama gelir?
Yatay yarıçapları dikey yarıçaplardan ayırır. 40px / 20px her köşeyi 40 px genişliğinde ve 20 px yüksekliğinde çeyrek elips olarak yuvarlar. Her iki yanda en fazla dörder değerle toplam sekiz değer olur.
Yuvarlaklık neden ayarladığımdan küçük?
Çünkü aksi hâlde eğriler üst üste binerdi. Tarayıcı bu durumda tüm yarıçapları – tek başına sığacak köşeler dahil – aynı oranda küçültür. Araç katsayıyı ve gerçekte kullanılan yarıçapları gösterir.
Dört değer hangi sırayla yazılır?
Sol üst, sağ üst, sağ alt, sol alt – sol üstten başlayarak saat yönünde. Uzun özellikler border-top-left-radius, border-top-right-radius, border-bottom-right-radius ve border-bottom-left-radius’tur.
Kaynaklar ve yasal dayanak
- css-backgrounds-3, § 4.1: W3C – CSS Backgrounds and Borders Module Level 3: the border-radius properties
- css-backgrounds-3, § 4.5: W3C – CSS Backgrounds and Borders Module Level 3: Overlapping Curves
- MDN Web Docs – border-radius
Güncelleme:
Benzer araçlar
- CSS box shadow oluşturucuCSS box shadow oluşturucu: kaydırıcılarla gölge yapın – çoklu katman, bulanıklık, spread, saydam renk, inset ve hazır şablonlar; CSS’i tek tıkla kopyalayın.
- CSS gradient oluşturucuCSS gradient oluşturucu: doğrusal, dairesel veya konik renk geçişi, istediğiniz kadar renk durağı, açı ve yedek renk – canlı önizleme ve kopyalanmaya hazır CSS.
- Renk dönüştürücü: HEX, RGB, HSL, HSV, CMYKRenk kodu dönüştürücü: HEX kodunu RGB’ye, RGB’yi HEX’e, HSL, HSV, HWB ve CMYK’ye çevirin. Rengi istediğiniz formatta girin ya da seçiciden seçip kopyalayın.
- AB KDV numarası doğrulama (format ve kontrol hanesi)AB KDV numarası doğrulama: 27 AB ülkesi ve Kuzey İrlanda (XI) için KDV kimlik numarasının formatını ve kontrol hanesini kontrol edin. VIES bağlantısıyla.
- Barkod kontrol basamağı: EAN, GTIN ve ISBN doğrulamaEAN-8, EAN-13, UPC-A, GTIN-14 ve ISBN-10/13 kontrol basamağını doğrulayın, eksik basamağı hesaplayın, ISBN-10’u ISBN-13’e çevirin – ücretsiz, tarayıcıda.
- Base64 encode ve decodeBase64 ve Base64url’i doğru UTF-8 ile kodlayın ve çözün; URL encode/decode (yüzde kodlama) dahil. Anlaşılır hata mesajları, tamamen tarayıcınızda çalışır.