CSS Border-Radius Oluşturucu

Canlı önizleme ve kopyalanabilir CSS koduyla yuvarlatılmış köşeleri görsel olarak ayarlayın.

Dikey yarıçaplar:

px
px 
{{ cssOutput }}

border-radius nedir?

CSS özelliği border-radius, bir öğenin köşelerini yuvarlar. Dört köşe için tek tip bir yarıçap belirleyebilir veya her köşeyi ayrı ayrı şekillendirebilirsiniz. Kısa yazım sırası: sol-üst, sağ-üst, sağ-alt, sol-alt şeklindedir.

Eliptik kenarlık yarıçapları

Genişletilmiş sözdizimi border-radius: H1 H2 H3 H4 / V1 V2 V3 V4 ile her köşe için yatay ve dikey bir yarıçap tanımlayabilirsiniz. Bu, daha organik şekiller üreten eliptik eğriler oluşturur.

Yaygın kullanım alanları

  • Daireler: Kare bir öğede border-radius: 50%.
  • Hap şekli: Yuvarlatılmış butonlar için border-radius: 9999px.
  • Kartlar: Modern kart tasarımları için border-radius: 8px ile 16px arası.
  • Blob şekilleri: Organik şekiller için farklı yatay ve dikey yarıçaplar.