Border Radius Generator

Bu araç hakkında

border-radius özelliği bir öğenin köşelerini yuvarlar. Dört değer eşit olduğunda kısa notasyon kullanılır. Farklı değerler asimetrik şekiller oluşturur — hap şekli tüm köşelerde 50% kullanır, yaprak şekli 0% ve 50%'yi dönüşümlü kullanır.

Doğrudan değer girmek için herhangi bir köşe sayısına tıklayın veya dört köşeyi aynı anda değiştirmek için bağlı kaydırıcıyı sürükleyin. Her köşeyi bağımsız olarak kontrol etmek için Tüm köşeleri kilitle seçeneğini kapatın.

Nasıl kullanılır

1. Dört köşe alanına (sol-üst, sağ-üst, sol-alt, sağ-alt) değer girin.
2. Dört değeri aynı anda kaydırıcıyla ayarlamak için Tüm köşeleri kilitle'yi etkinleştirin.
3. Tasarım gereksinimlerinize göre px ve % birimleri arasında geçiş yapın.
4. Önceden tanımlanmış bir şekli anında uygulamak için preset'e (Hap, Yaprak, Blob vb.) tıklayın.

Kullanım senaryoları

UI tasarımcıları border-radius'u butonlar, kartlar ve avatar şekilleri oluşturmak için kullanır. Geliştiriciler marka tasarım sistemlerine uyum için yuvarlak köşeleri ince ayar yapar. Hap şekli (50%) tag'ler ve rozetler için yaygın kullanılır. Asimetrik değerler dekoratif öğeler için organik yaprak veya blob şekilleri oluşturur.

Sık sorulan sorular

• px ve % arasındaki fark nedir? — px öğe boyutundan bağımsız sabit bir köşe yarıçapı verir. % öğenin genişliği ve yüksekliğine göredir — tüm köşelerde 50% mükemmel bir daire oluşturur (öğe kare ise).
• Her köşe için farklı yarıçap ayarlayabilir miyim? — Evet. Tüm köşeleri kilitle seçimini kaldırın ve her köşe alanına farklı değerler girin.
• Kısa notasyon çıktısı ne anlama gelir? — Dört köşe eşit olduğunda çıktı tek bir değerdir. Farklı olduğunda CSS sırası şöyledir: sol-üst, sağ-üst, sağ-alt, sol-alt.