Border Radius Üretici

border-radius nedir?

border-radius, bir öğenin köşelerini yuvarlatır. CSS, tek tip bir yarıçap uygulamak yerine köşe başına en fazla dört değer tanımlamanıza izin verir; böylece bir kutu bir yandan neredeyse kare, diğer yandan tamamen yuvarlak görünebilir.

Dört değer nasıl çalışır?

Sıra, sol üst köşeden başlayarak saat yönünde gider: sol üst, sağ üst, sağ alt, sol alt. Tüm köşeler aynı değeri taşıdığında kısa biçim border-radius: 20px yeterlidir; aksi hâlde dört değer sırayla yazılır.

Yuvarlatılmış köşeler nerelerde kullanılır?

• Yumuşak hap görünümlü buton, rozet ve etiketlerde.
• Keskin dikdörtgenlerden daha dost canlısı hissettiren kart ve pencerelerde.
• Boyutun yarısı ayarlanarak kusursuz daire elde edilen avatarlarda.
• Tutarlı yarıçaplı giriş alanları ve etiketlerde.

Yarıçap küçük mü yoksa büyük mü olmalı?

Küçük yarıçaplar (2–8px) sade ve profesyonel görünür; büyük yarıçaplar (16–40px) yuvarlak ve eğlenceli hissettirir. Genel kural, yarıçapı öğeden belirgin şekilde küçük tutmaktır — kutunun yarısından büyük bir yarıçap yalnızca hap şekli üretir.

Üretilen CSS minimum düzeyde mi?

Evet. Köşeler birleştirildiğinde araç tek değerli kısa biçimi yazar. Herhangi bir köşe farklılaştığında dört açık değere geçer; böylece çıktı minimum ve okunaklı kalır.