Nasıl kullanılır?
- Birim seçin: sabit bir yarıçap için px, kutunun boyutuna göre değişen bir yarıçap için % seçin.
- Sol üst, Sağ üst, Sağ alt ve Sol alt köşelerinin her biri için bir yarıçap yazın. Sıfır olan köşe kare kalır.
- Bir köşenin genişliğinin yüksekliğinden farklı olmasını istiyorsanız Eliptik köşeler (ayrı dikey yarıçap) kutusunu işaretleyin ve dikey yarıçapı yazın.
- CSS tanımını kopyalayıp öğenizin kuralına yapıştırın.
Dört köşe nasıl yazılır?
border-radius özelliği, sol üst, sağ üst, sağ alt ve sol alt sırasıyla bir ila dört yatay yarıçap alır. Daha az değer verildiğinde liste verilenleri tekrarlar: iki değer varsa ilki sol üst ve sağ alt köşelere, ikincisi sağ üst ve sol alt köşelere uygulanır. Dikey yarıçaplar aynı sırayla, bir eğik çizgiden sonra yazılır.
Sözdizimi CSS Backgrounds and Borders belirtiminde açıklanır. Her yarıçap bir uzunluk ya da kutunun yüzdesidir; sıfır olan yarıçapın birime ihtiyacı yoktur.
border-radius: sol-üst sağ-üst sağ-alt sol-alt / dikey-sol-üst dikey-sağ-üst dikey-sağ-alt dikey-sol-altEn kısa biçim
Araç, kısaltmanın zaten tekrarlayacağı her değeri çıkarır. Sol alt köşe sağ üstle aynıysa yazılmaz; sağ alt köşe sol üstle aynıysa üçüncü değer de yazılmaz. Dört eşit köşe tek değere iner; bu yüzden 12px 12px 12px 12px, 12px olarak yazılır.
Eğik çizgi yalnızca bir dikey yarıçap yatay yarıçapından farklıysa yazılır. Eliptik köşeler kapalıyken her dikey yarıçap yatay yarıçapına eşittir ve eğik çizgi çıkmaz.
Örnek: eliptik köşeli bir kart
Sol üst köşeyi 40 px x 20 px, sağ üst köşeyi 20 px x 10 px, sağ alt köşeyi 40 px x 20 px ve sol alt köşeyi 20 px x 10 px yapın. Yatay yarıçaplar 40, 20, 40, 20'dir ve kısa biçimde 40px 20px yazılır. Dikey yarıçaplar 20, 10, 20, 10'dur ve 20px 10px yazılır.
Tanım border-radius: 40px 20px / 20px 10px; olur ve önizlemede yüksekliğinden geniş köşeler görünür.
Sık sorulan sorular
Neden eğik çizgiyle ayrılmış iki sayı grubu var?
İlk grup her köşenin yatay yarıçapını, eğik çizgiden sonraki grup dikey yarıçapını verir. Eğik çizgi yoksa köşe iki yönde de aynı yarıçapa sahip bir yay olur.
Yüzde yarıçap ne yapar?
Yüzde, yatay yarıçapta kutunun genişliğinden, dikey yarıçapta yüksekliğinden alınır. Her köşede yüzde 50 kare kutuda daire, dikdörtgen kutuda elips oluşturur.
Sıra neden sol üst, sağ üst, sağ alt, sol alt?
Kısaltma, diğer kutu özelliklerinin de kullandığı saat yönü sırasını izler ve sol üstten başlar. Bu sırayı bildiğinizde iki ya da üç değerli kısa biçimler kolayca okunur.
Araç yarıçapı kutunun boyutuyla karşılaştırıyor mu?
Hayır. Araç yalnızca her yarıçapın sıfır ya da daha büyük bir sayı olduğunu ve 1000 px ya da yüzde 100 sınırının içinde kaldığını denetler. İki komşu yarıçap kutunun kenarından uzunsa tarayıcı onları küçültür.
Yazdığım bilgiler saklanıyor ya da bir sunucuya gönderiliyor mu?
Hayır. Önizleme ve CSS tarayıcınızda hazırlanır. Hiçbir şey saklanmaz ya da sunucumuza gönderilmez; bu yüzden sayfadan ayrılmadan önce tanımı kopyalayın.
Kaynaklar
Rakamlar ve metin en son 10 Kasım 2026 Salı tarihinde kontrol edildi.