Araçlarım

CSS border-radius oluşturucu

Bir kaydırıcı sürükleyin veya hazır değer seçin — biçimi canlı görün ve border-radius CSS'ini tek tıkla kopyalayın.

Kip
Birim
Hazır değerler
Önizleme — komşu yarıçaplar taştığında tarayıcı bunları küçültür, bu yüzden önizleme gerçek sonuçtur.
Nasıl kullanılır
  1. Ekranda yuvarlatılmış bir kart (16px) hazır — Yarıçap kaydırıcısını sürükleyin veya birimi (px / %) değiştirin, her şey canlı güncellenir; düğmeye basmanıza gerek yok.
  2. Kipleri çubuklarla değiştirin: “Tüm köşeler” tek kaydırıcıyı kullanır, “Köşe köşe” dört köşeyi bağımsız düzenler (sol üst, sağ üst, sağ alt, sol alt), “Eliptik” her köşeye yatay ve dikey birer yarıçap ekler (eğik çizgi sözdizimi).
  3. Hazır değere tıklayın (Keskin, Yuvarlak kart, Daire, Hap, Yaprak, Damla) — hazır biçim yüklenir; kip ve birim otomatik uyar. Tam border-radius tanımını tek tıkla kopyalayın.
Örnek
Hazır değer
Yuvarlak kart
border-radius CSS
border-radius: 16px;
Yaprak hazır değeri (köşe köşe, 0 / 50% / 0 / 50%) border-radius: 0% 50%; olarak kısalır ve Damla hazır değeri eliptik biçimde border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; üretir. Köşeler birbirinin ayna görüntüsü olduğunda her zaman daha kısa gösterim kullanılır — tıpkı CSS kısa gösterim kuralları gibi.
Kapsam, sınırlar ve sık sorulan sorular
  • Yalnızca border-radius: iOS tarzı yumuşak/sürekli köşeler (squircle) yok — bunlar clip-path veya SVG gerektirir ve kapsam dışıdır.
  • Mevcut CSS değerlerinin yapıştırılması yok: her değer kaydırıcılardan, hazır değerlerden ve kip çubuklarından gelir, bu yüzden yanlış ayrıştırılacak bir şey yoktur.
  • Komşu yarıçapların toplamı bir kenardan büyükse tarayıcı bunları orantılı olarak küçültür. Önizleme gerçek çizim sonucudur; kod kutusu sizin girdiğiniz değerleri gösterir.
  • Hap hazır değeri 9999px üretir — “olabildiğince yuvarlak” için topluluğun kısa gösterimi; tarayıcı bunu kısa kenarın yarısına kısıtlar.
  • Yüzdeler eksen bazında ölçülür: yatay yarıçaplar genişliğe, dikey yarıçaplar yüksekliğe göre (önizleme kare olduğundan orada ikisi de aynı okunur). Başka öğe boyutlarında aynı yüzde farklı biçim verir.
  • Hiçbir şey kaydedilmez veya bağlantıda parametreyle paylaşılmaz: sayfayı yenilerseniz varsayılan Yuvarlak kart değerine dönersiniz. Her şey tarayıcınızda çalışır.
Kutunun kendisini biraz daha şekillendirmeniz gerektiğinde.
CSS box-shadow oluşturucu
CSS gradyan oluşturucu