Tasarım Aracı

CSS Border Radius Generator

CSS köşe yuvarlama değerlerini görsel olarak tasarlayın. Asimetrik ve ellips köşeler dahil.

Hazır:
—

CSS border-radius Sözdizimi

/* 4 köşe eşit */
border-radius: 8px;

/* Saat yönünde: sol-üst sağ-üst sağ-alt sol-alt */
border-radius: 4px 8px 12px 20px;

/* Yatay / dikey (ellips) */
border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;

Yaygın Tasarım Şablonları

  • Tam daire: border-radius: 50% — kare bir elemente uygulandığında mükemmel daire.
  • Hap (pill) buton: border-radius: 9999px — genişlik ne olursa olsun tam yuvarlak uçlar.
  • Kart köşesi: border-radius: 8px veya 12px — arayüz kartlarında en yaygın değer.
  • Blob: 60% 40% 30% 70% / 60% 30% 70% 40% — organik, asimetrik şekil; arka plan dekorasyonlarında popüler.

Sık Sorulan Sorular

border-radius ile clip-path arasındaki fark nedir?

border-radius yalnızca köşe yuvarlama yapabilir; desteklediği şekil türleri sınırlıdır. clip-path ise herhangi bir poligon, daire, elips veya SVG yolunu maske olarak kullanır; çok daha karmaşık şekiller üretilebilir. Ancak clip-path ile kesilen alanlarda box-shadow çalışmaz. Köşe yuvarlama için border-radius her zaman daha basit ve daha iyi destekli seçenektir.

İlgili araçlar: Box Shadow Generator · Glassmorphism · Neumorphism