CSS border radius generator ile her köşeyi ayrı ayarlayın. Yuvarlak veya eliptik köşeleri önizleyin, CSS kodunu ücretsiz kopyalayın.
Dört köşeyi birbirinden bağımsız ayarlayın
Border radius generator her köşenin yatay ve dikey yarıçapını ayrı belirler. Piksel sabit uzunluk, yüzde ise kutunun ilgili boyutuna bağlı yarıçap üretir. Aynı yatay ve dikey değer yuvarlak köşe, farklı değerler eliptik köşe oluşturur.
CSS köşe sırası
CSS border radius generator çıktısında eğik çizgiden önce yatay, sonra dikey yarıçaplar bulunur. Her bölümün sırası sol üst, sağ üst, sağ alt ve sol alttır. Bütün değerler 16 px seçildiğinde her köşe aynı yarıçapı kullanır.
Örneğin sol üst yatay 40 px, dikey 10 px seçimi o köşede yatay yönde daha geniş elips üretir. Yüzde modu farklı kutu boyutlarında farklı fiziksel kıvrımlar oluşturabilir; önizleme yalnız bu sayfadaki örnek kutudur.
Fancy border radius generator için sınır
Asimetrik köşelerle serbest biçimler denenebilir, ancak araç SVG yolu veya rastgele blob üretmez. Köşe yarıçapları yan yana sığmazsa tarayıcı bunları CSS çakışma kurallarına göre ölçekler. Girilen 100 px değerinin her kutuda görünür olarak tam 100 px kalacağını varsaymayın.
Kod yalnız border-radius özelliğini içerir. İçeriğin de köşe sınırından kırpılması gerekiyorsa uygun overflow davranışını kendi tasarımınızda ayrıca belirleyin.
Sık sorulan sorular
Yüzde 50 her zaman daire yapar mı?
Kare kutuda 50% daire oluşturabilir; dikdörtgende elips oluşur. Kutu boyutları sonucu etkiler.
Negatif yarıçap girilebilir mi?
Hayır. Yarıçap değerleri sıfır veya pozitif olmalıdır.
Resmi gerçekten keser mi?
Bu araç CSS kodu üretir; resim dosyasını değiştirmez.
Dört değerin hepsini yazmak zorunlu mu?
Bu araç açık sekiz değerli biçim üretir. CSS içinde eşit değerler uygun kısaltmalarla da yazılabilir.