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

Birim

Tüm Köşeleri Bağla

Sol Üst 20px

Sağ Üst 20px

Sağ Alt 20px

Sol Alt 20px

Hazır Şekiller

Canlı Önizleme

CSS Çıktısı

Tüm işlemler tarayıcınızda gerçekleşir. Hiçbir veri sunucuya gönderilmez.

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

Bir öğede genişlik yükseklik eşitse border-radius'i %50'ye ayarlayın. Bu, her köşeye en büyük değerini yuvarlaklaştırarak mükemmel bir daire oluşturur. Tool'daki Daire prensibi ile anında oluşturabilirsiniz. Not: Öğenin kare değilse, elips yerine daire olur.

Pixelleri size birleşik görünen butonlar ve kartlar gibi her büyüklükte öğelerde sabit bir yuvarlaklık boyutu sağlar. Hiçbir şekilde küçültülmezler — "10px" her zaman köşeleri 10 piksel yuvarlaklaştırır. Yüzdelikler ise öğe boyutlarına göre ölçekli olarak yuvarlanış oluşturur — örnek için "50%" bir 100 piksellerlik kareye %50'lik bir yuvarlaklık verir. px kullanın, aynı görünümde butonlar ve kartlar olsun. % kullanın, simetrik şekiller veya pill butonlar olsun.

Köşeleri bağlı olanlar işareti ile ayırın, ardından her bir köşeyi bireysel olarak ayarlama için köşe düzenleyicisini ayrıntılandırın. CSS kısayolu için: border-radius: sol üst sağ alt sol alt sağ. Örnek için: "border-radius: 10px 20px 30px 40px" her köşeyi saat yönünün tersine küreleyerek farklı ayarları verir.

Tüm dört köşe eşitse, CSS kısayolu tek bir değerle yazılabilir: "border-radius: 16px". İki çift eşit ise (sol üst/sağ alt vs sol sağ/alt sol), iki değer yazılır: "border-radius: 10px 20px". Tool her zaman en kısa kısayolunu oluşturur.

Bir pillin fully yuvarlak sol ve sağ uçları tamamen yuvarlak, üst ve alt kenarları ise düz (veya tersi)dir. Genellikle "9999px" veya "50%" gibi çok büyük bir border-radius değeri ile oluşturulur. Browser elipsin daha kısa bir kenarı olan tarafında çapı yarıya indirdiğinde her iki kısa uçta tam daireler oluşur. Tool'da pill prensibi ile anında oluşturabilirsiniz.

Evet. Tool px ve % gibi birimler destekler. Design sisteminizi destekleyen em veya rem birimlerine ihtiyacınız varsa, değerleri manuel olarak CSS'e çevirin. border-radius özelliğiyle her hangi bir geçerli CSS uzunluğu kabul eder (px, em, rem, %, vw vb.) — Tool sadece px ve % ü genererir çünkü bu en sık kullanılanlardır.

Evet. border-radius kısıtlı box'u keserek arka plan görüntülerini ve renklerini de keser. Öğede de overflow:visible varsa, çocuk öğeler bile yuvarlak köşelere taşabilirler — bunlar da kesilmesini istiyorsanız "overflow:hidden"i ekleyin. Yuvarlak köşeler tutarlı bir şekilde arka planda, sınırda ve box-shadow'da uygulanır.

Hayır. Tüm işlemler JavaScript tarafından yürütülür. Hiçbir CSS değeri, tasarım verisi — hiçbir şey cihazınızdan ayrılır.

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.

Güvenlik ve Gizlilik

Verilerinizin güvenliği bizim önceliğimiz

Yerel İşleme

Tüm işlemler tarayıcınızda gerçekleşir

Veri Transferi Yok

Verileriniz sunucularımıza gönderilmez

Veri Depolama Yok

Hiçbir veri depolanmaz veya paylaşılmaz

SSL Şifreleme

Güvenli bağlantı için SSL şifreleme

Sonraki Adım

Box Shadow Oluşturucu

Birden fazla katman ile CSS box-shadow oluşturun

CSS Gradient Oluşturucu

Canlı önizleme ile CSS gradient oluşturun

Bu araç işinize yaradı mı?

Border Radius Oluştürücu