Yuvarlatılmış köşe ve şekil oluşturucu
Dört köşenin yatay ve dikey yarıçaplarını px veya % cinsinden ayarlayın ve şekli önizleyin. Oluşturulan border-radius CSS'ini kopyalayın veya kaydedin. Önizleme genişliği, yüksekliği ve rengi CSS'e dahil değildir.
Neler yapabilirsiniz
Hazır ayardan yuvarlamayı ayarlama
Yuvarlak köşeler, kapsül ve yaprak dahil 8 hazır ayardan birini seçin ve yarıçapları ayarlayın. Hazır ayar seçildiğinde yarıçaplar ve birim değiştirilir.
Dört köşeye de farklı yuvarlama verin
Aynı yarıçap ayarını kapatıp sol üst, sağ üst, sağ alt ve sol alt köşelerin yatay ve dikey yarıçaplarını ayrı ayrı girin.
CSS'yi kontrol edip alın
Şekli kontrol ettikten sonra CSS oluşturun. Kısa yazım ile tek tek köşe bildirimleri arasında geçiş yapın, ardından kopyalayın veya CSS dosyası olarak kaydedin.
Nasıl kullanılır
Hazır ayar ve birim seçin
Yarıçapları doğrudan girin veya ayarlamaya başlamak için bir hazır ayar seçin. Birimi değiştirmek sayıları dönüştürmez.
Yuvarlamayı ve şekli karşılaştırın
Aynı yarıçapı kullanmak için tek bir değer girin. Köşeye göre değiştirmek için seçeneğin işaretini kaldırın ve yatay ile dikey değerleri ayarlayın.
Gerekirse boyutu kontrol edin
Önizleme ayarlarında genişliği, yüksekliği ve önizleme rengini değiştirebilirsiniz. Bunlar çıktı CSS'sine dahil edilmez.
CSS oluşturup kopyalayın veya kaydedin
“CSS oluştur” düğmesine basın ve istediğiniz biçimi seçin. Yarıçapları, birimi veya boyutu değiştirirseniz yeniden oluşturun.
Ne zaman yararlıdır
Kart ve düğmelerin köşelerini şekillendirin
Dört köşeyi de eşit yuvarlayarak veya yalnızca üst köşeleri yuvarlayarak sayfa bileşenleri için CSS oluşturmak istediğinizde.
Asimetrik yuvarlak arka plan oluşturun
Köşeye göre yatay ve dikey yuvarlamayı değiştirerek yaprak veya organik şekillere benzeyen dış hatlar oluşturmak istediğinizde.
Yarıçap, birim ve görüntüleme boyutu ilişkisi
Yatay ve dikey aynı köşenin iki yönüdür
Yatay yarıçap yatay yuvarlamayı, dikey yarıçap dikey yuvarlamayı kontrol eder. Değerlerden biri 0 ise köşe yuvarlatılmaz. Dört köşeyi sol üstten başlayarak saat yönünde belirtin.
% genişlik ve yüksekliği ayrı referans alır
Yatay % değerleri öğenin genişliğine, dikey % değerleri yüksekliğine göredir. Sayılar aynı olsa bile kare ile uzun veya geniş dikdörtgen farklı görünür. px uzunluğu doğrudan belirtir.
Büyük yarıçaplar aynı oranda küçülür
Bitişik yarıçapların toplamı kenar uzunluğunu aşarsa, görüntülenen 8 yarıçapın tamamı ortak bir katsayıyla küçültülür. Girdi değerleri ve oluşturulan CSS değişmeden kalır. Oluşturma sonrası ayrıntılarda önizlemede kullanılan yarıçapları kontrol edebilirsiniz.
Yuvarlak köşelerin ifade edebileceği dış hat aralığı
border-radius köşeleri eliptik eğriler haline getirir. Girinti veya rastgele çokgen oluşturamaz. Squircle hazır ayarı eliptik köşelerle yaklaşık şekil verir; matematiksel eğriyi tam olarak üretmez.
Sık sorulan sorular
Her köşeye farklı yuvarlama ayarlayabilir miyim?
Evet. Her köşenin yatay ve dikey yarıçaplarını ayrı ayrı girmek için “Tüm köşeler için aynı yarıçapı kullanın” seçeneğinin işaretini kaldırın. Yeniden işaretlerseniz tüm yarıçaplar sol üst yatay yarıçapa eşitlenir.
Birimleri değiştirdiğimde sayılar dönüştürülür mü?
Hayır. Sayılar korunur, yalnızca birim değişir. px biriminden % birimine geçtikten sonra 100 üzerinde bir değer kalırsa, 0–100 aralığında yeniden girin.
Önizlemenin boyutu ve rengi CSS'ye dahil mi?
Hayır. Çıktı yalnızca border-radius bildirimlerini içerir. Genişliği, yüksekliği ve arka plan rengini kullandığınız sayfada veya bileşende ayarlayın.
Görüntülenen şeklin yuvarlak köşeleri neden girdiğim yarıçaplardan daha küçük?
Köşe eğrilerinin çakışmasını önlemek için tarayıcı, görüntülenen yarıçapları aynı oranda küçültür. Küçültme oranını ve her köşenin px değerlerini “Görüntüleme için kullanılan yarıçaplar (px)” altında kontrol edebilirsiniz.
Girdi ve sonuçlar
- Yarıçaplar
- 8 değerin tamamını aynı birimle belirtin: 0–100% veya 0–9999px. Ondalık değerler de kabul edilir.
- Önizleme
- Önizleme genişliği ve yüksekliği 1–400px arasında tam sayılardır. Sığmayan genişlik alan içinde yatay kaydırılabilir.
- Çıktı
- border-radius kısa yazımı veya 4 köşenin her biri için bildirimler. border-radius.css dosyasını kopyalayın veya kaydedin.
- Dahil olmayanlar
- Genişlik, yükseklik, arka plan rengi ile görüntü veya SVG dışa aktarımları.