toolsmoah

Kenar Yarıçapı Oluşturucu

CSS border-radius özelliklerini görsel olarak oluşturun ve önizleyin.

Oluşturulan CSS
Her köşenin yuvarlaklığını ayarlayın
Önizleme
Oluşturulan kenar yarıçapı efektini önizleyin
Önizleme
Oluşturulan CSS
border-radius: 20px;
Örnekler
Önceden tanımlanmış kenar yarıçapı stillerini uygulamak için tıklayın
Kenar Yarıçapı Özellikleri

Özellik Sırası

border-radius özelliği saat yönünde uygulanır: sol üst → sağ üst → sağ alt → sol alt

Kısaltma Özellikleri

  • • border-radius: 10px; - Dört köşeye de uygulanır
  • • border-radius: 10px 20px; - İlk olarak sol üst ve sağ alta, ikinci olarak sağ üst ve sol alta uygulanır
  • • border-radius: 10px 20px 30px; - İlk olarak sol üste, ikinci olarak sağ üst ve sol alta, üçüncü olarak sağ alta uygulanır
  • • border-radius: 10px 20px 30px 40px; - Sırasıyla sol üst, sağ üst, sağ alt ve sol alta uygulanır

Kullanım İpuçları

  • • Mükemmel bir daire oluşturmak için %50 kullanın
  • • 4-8 piksel genellikle düğmeler için iyidir
  • • 8-16 piksel kartlar ve paneller için yaygındır
  • • Asimetrik yarıçap benzersiz tasarım efektleri oluşturabilir
    Kenar Yarıçapı Oluşturucu | toolsmoah