Border Radius Üretici

Bu araç ne işe yarar?

Bu araç, her köşeyi ayrı ayrı ayarlayarak CSS border-radius değerini görsel olarak oluşturmanızı sağlar. Kaydırıcılarla dört köşeyi (sol üst, sağ üst, sağ alt, sol alt) ayarlar, canlı önizlemede sonucu anında görür ve hazır CSS kodunu tek tıkla kopyalarsınız.

Nasıl kullanılır?

Değerleri ve seçenekleri ayarlayın.
Canlı önizlemede sonucu görün.
Üretilen CSS/kodu projenize kopyalayın.

Köşeler, birimler ve önizleme

px veya % birimini seçebilirsiniz: px sabit yuvarlatma verirken % öğenin boyutuna oranlı esnek köşeler üretir. 'Köşeleri birbirine bağla' seçeneği açıkken bir kaydırıcı tüm köşeleri aynı anda değiştirir; kapatınca her köşeyi bağımsız ayarlarsınız. Önizleme kutusu seçimlerinizi anında gösterir ve araç dört köşe eşitse kısa 'border-radius: 12px;', farklıysa dört değerli açık yazımı otomatik üretir.

Tipik kullanım örnekleri

Buton, kart ve giriş alanlarına yumuşak köşeler vermek, hap (pill) şeklinde butonlar veya tek köşesi kesik kartlar tasarlamak için idealdir. Örneğin sol üst ve sağ alt köşeyi yüksek, diğerlerini sıfır bırakarak yaprak benzeri bir biçim elde edebilirsiniz. Ürettiği kodu doğrudan CSS dosyanıza yapıştırabilir, böylece deneme yanılmayı tarayıcıda değil burada hızlıca yaparsınız.

Sıkça sorulan sorular

px ile % arasındaki fark nedir?

px sabit bir yuvarlatma yarıçapıdır; % ise öğe boyutuna göre ölçeklenir, bu yüzden %50 kare bir kutuyu daireye dönüştürür.

Tek bir köşeyi nasıl ayrı ayarlarım?

'Köşeleri birbirine bağla' kutusunun işaretini kaldırın; ardından her kaydırıcı yalnızca kendi köşesini değiştirir.

Üretilen kodu nasıl kullanırım?

Kod kutusundaki kopyala düğmesine basıp border-radius satırını CSS kuralınıza yapıştırmanız yeterlidir.