Border Radius Oluştürücu
Border-radius'u görsel olarak tasarlayın ve kullanıma hazır CSS kodu alın
Border Radius Oluştürücu
Canlı Önizleme
CSS Çıktısı
Kullanım Örnekleri
Mükemmel Daire
Tüm köşelerde %50 border radius ile mükemmel yuvarlak bir eleman oluştürün.
Hap Şekli
Büyük yatay border radius değerleriyle hap şeklinde bir buton tasarlayın.
Organik Şekil
Her köşe için farklı değerler ayarlayarak benzersiz organik şekiller oluştürün.
Özellikler
Canlı Görsel Önizleme
Kaydırıcıları ayarladıkça border radius efektinin gerçek zamanlı güncellendiğini görün
Bağımsız Köşe Kontrolü
Her köşeyi bağımsız olarak ayarlayın veya tümünü eşit border radius için bağlayın
Hazır Şekiller
Daire, hap, yuvarlatılmış dikdörtgen ve özel gibi yaygın şekillere hızlı erişim
Gizlilik Öncelikli
Her şey tarayıcınızda çalışır — hiçbir veri sunucuya gönderilmez
Nasıl Kullanılır?
Köşeleri Ayarlayın
Her köşe için border radius ayarlamak üzere kaydırıcıları kullanın veya eşit değerler için bağlantı modunu açın.
Şekli Önizleyin
Yarıçap değerlerini değiştirdikçe canlı önizleme kutusunun anında güncellendiğini izleyin.
CSS Kodunu Kopyalayın
Oluştürülan border-radius kodunu panoya kopyalamak için CSS Kopyala butonuna tıklayın.
Sık Sorulan Sorular
Bu Araç Ne İşe Yarar?
Bu border-radius oluşturucu, CSS elemanlarınız için yuvarlatılmış köşeleri görsel olarak tasarlamanızı sağlar. Kaydırıcıları sürükleyin, önizlemenin anında güncellenmesini izleyin ve oluşturulan CSS kodunu tek tıkla kopyalayın. Artık stil dosyanızda piksel değerlerini tahmin etmenize gerek yok.
CSS'de border-radius Nasıl Çalışır?
CSS border-radius özelliği her köşe için piksel, yüzde veya em değerleri kabul eder. Dört köşeyi tek seferde kısayol yazımıyla (border-radius: 10px) veya her birini ayrı ayrı kontrol edebilirsiniz. Yüzdeler elemanın boyutlarına göre hesaplanır, bu yüzden kare bir elemanda %50 daire oluşturur.
Hazır Şekiller ve Özel Tasarımlar
Daire, hap ve yuvarlatılmış dikdörtgen için hazır şablonlarla hızlıca başlayın. Ya da her köşeye farklı değerler vererek modern arayüz tasarımlarında popüler olan organik, asimetrik şekiller oluşturun.
Tüm Modern Tarayıcılarla Uyumlu
border-radius özelliği Chrome, Firefox, Safari ve Edge dahil tüm büyük tarayıcılarda desteklenir. Bu aracın ürettiği kısayol sözdizimi en uyumlu formattır, projenize doğrudan yapıştırabilirsiniz.
Gizlilik ve Hız
Bu araç %100 tarayıcınızda çalışır. Sunucu isteği yok, tasarımlarınız takip edilmez, hesap açmanıza gerek yok. Sayfayı açın ve tasarlamaya başlayın.