CSS border-radius Oluşturucu
border-radius, kare üzerindeki 50% neden bir daire verirken dikdörtgen üzerindeki 50% neden oval verir diye açıklamaya çalışana kadar basit görünür. Bu oluşturucu, dört köşenin her biri için bir değer girmenize, px, % ve rem arasında seçim yapmanıza ve üretilen kısa yazımı olduğu gibi kopyalamanıza olanak tanır. Düğme biçimleri, kart köşeleri, hap biçimli düğmeler (pill) ve asimetrik köşeler için kullanışlıdır.
border-radius nasıl oluşturulur
-
1
Her köşeyi ayarlayın
Sol üst, sağ üst, sağ alt ve sol alt köşeler için bir yarıçap girin.
-
2
Birimi seçin
Piksel px (sabit boyut), yüzde % (öğeye göre) veya rem (kök yazı tipi boyutuna göre).
-
3
CSS'yi oluşturun
Kısa yazımı oluşturmak için Generate CSS düğmesine basın.
-
4
Kuralı kopyalayın
`border-radius` kısa yazımını kopyalayıp stil sayfanıza yapıştırın.
Kısa yazımdaki sıra
border-radius: top-left top-right bottom-right bottom-left;
margin / padding ile aynı: sol üstten başlayarak saat yönünde. Atlanan değerler karşı köşeyi yansıtır. Bu yüzden border-radius: 10px 20px;, sol üst ve sağ altta 10px, sağ üst ve sol altta 20px anlamına gelir.
Bu oluşturucunun yapmadıkları
Her köşe için tek bir yarıçap belirler; bu nedenle eliptik köşeler (border-radius: 20px 10px / 5px 15px; gibi eğik çizgili iki değerli biçim) veya border-top-left-radius gibi açık yazılmış özellikler üretmez. Bunlara ihtiyacınız varsa CSS’yi elle yazın.
Yüzde ile piksel karşılaştırması
| Birim | Davranış |
|---|---|
| px | Sabit, öğenin boyutuyla ölçeklenmez |
| % | Öğenin genişliğinin (yatay) ve yüksekliğinin (dikey) yüzdesi |
| em | Öğenin yazı tipi boyutuyla ölçeklenir |
| rem | Kök yazı tipi boyutuyla ölçeklenir |
Kare bir öğe üzerinde 50% = daire. 200×100 boyutlu bir dikdörtgende 50% = yatay yarıçap 100px artı dikey yarıçap 50px = elips.
Yaygın şekiller
| Şekil | CSS |
|---|---|
| Daire (kare) | border-radius: 50%; |
| Hap (pill) | border-radius: 9999px; (yüksekliğin yarısına eşit veya daha büyük herhangi bir değer) |
| Yuvarlatılmış kart | border-radius: 8px; veya 12px |
| Sohbet balonu | border-radius: 18px 18px 0 18px; (kuyruk sağ altta) |
| İnce | border-radius: 2px; veya 4px |
Hap düğmeleri için “yüksekliğin yarısı” kuralı
Hap biçimli düğme (pill), sol ve sağ uçları kusursuz yarım dairelerden oluşan bir dikdörtgendir. Bunu güvenilir biçimde elde etmek için border-radius değerini en az öğenin yüksekliğinin yarısı kadar ayarlayın. 9999px (veya çok büyük herhangi bir değer) kullanmak güvenlidir, çünkü tarayıcı yarıçapı gerçek geometriye göre sınırlar.
overflow ile etkileşim
border-radius varsayılan olarak yalnızca arka planı, kenarlığı ve kutu gölgesini kırpar. Alt öğeleri (görseller, iç içe öğeler) yuvarlatılmış biçime kırpmak için şunu ekleyin:
overflow: hidden;
veya yığılma bağlamlarını (stacking contexts) da kapsamak için isolation: isolate + overflow: hidden kullanın.
Erişilebilirlik notu
border-radius’un kendisinde bir erişilebilirlik sorunu yoktur, ancak etkileşimli öğelerde (hap düğmeleri, çipler) aşırı yuvarlama dokunma hedefini küçültmemelidir. Köşe yuvarlamasından bağımsız olarak düğmeleri en az 44×44px tutun (WCAG önerisi).
Sık Sorulan Sorular
Çünkü yüzde cinsinden border-radius, yatayda “genişliğin %“si, dikeyde “yüksekliğin %“si olarak ölçülür, kare olmayan bir öğede bu bir elips oluşturur. Daire için öğenin kare olması gerekir veya öğenin boyutlarıyla eşleşen piksel değerleri kullanılmalıdır.
Varsayılan olarak yalnızca arka planı, kenarlığı ve kutu gölgesini. Üst öğeye overflow: hidden da eklemediğiniz sürece alt öğeler kırpılmaz.
Sayısal değerler arasında animasyon yapılabilir: transition: border-radius 200ms; hem piksel hem yüzde için çalışır. Karmaşık bir eliptik kısa yazım ile basit bir yarıçap arasında animasyon yapmak şaşırtıcı ara kareler oluşturabilir; tuhaf görünüyorsa başlangıç ve bitiş durumlarını test edip basitleştirin.
Spesifikasyon bir üst sınır belirlemez, ancak tarayıcılar etkin yarıçapı öğenin kısa kenarının yarısıyla sınırlar. 40px yüksekliğindeki bir düğmede border-radius: 9999px kullanmak bir hap şekli verir, tarayıcı sessizce 20px ile sınırlar.
İlgili Araçlar
Gradyan Duvar Kağıdı Oluşturucu
Dizüstü bilgisayar, telefon veya Zoom arka planları için bulanık üç renkli gradyan duvar kağıtları oluşturun. Açıyı ve bulanıklığı rastgele belirleyin ya da elle ayarlayın.
JSON Biçimlendirici
JSON metnini 2 veya 4 boşlukla okunabilir hale getirmek, kompakt çıktıya küçültmek ya da sonucu kopyalamadan önce söz dizimini hızlıca kontrol etmek için yapıştırın.
HAR Dosyası Görüntüleyici
HAR ağ kayıtlarını yerel olarak açın, istekleri filtreleyin, maskeli üstbilgileri ve zamanlama aşamalarını inceleyip temizlenmiş özetleri yüklemeden dışa aktarın.
HEX Renk Seçici
HEX rengi seçin veya girin; RGB, HSL, yaklaşık CMYK, bağıl parlaklık ve beyaz-siyah kontrast oranlarını görün.
Renk Paleti Jeneratörü
Temel bir HEX renginden monokromatik, analog, tamamlayıcı, triadik veya tetradik paletler oluşturun ve kopyalamaya hazır CSS değişkenleri alın.
FPS Sayacı
requestAnimationFrame ile tarayıcı FPS değerini ölçün: yumuşatma, en düşük ve en yüksek kare hızı, uyarı eşiği ve isteğe bağlı grafik. Yerel çalışır, yükleme ve API yoktur.