Ana içeriğe geç
LibraTool logoLibraTool

Ücretsiz CSS Kenar Yarıçapı Oluşturucu

Her köşe üzerinde bağımsız kontrolle yuvarlak köşeleri görsel olarak tasarlayın. Organik damla şekilleri için eliptik X/Y sözdizimini destekler.

Yüklendikten sonra çevrimdışı çalışır
border-radius: 20px 20px 20px 20px;
Birim

Yaygın kullanımlar

  • Organik Blob ŞekilleriHero bölümleri ve gösterimler için benzersiz blob şekilleri oluşturmak için eliptik X/Y sözdizimini kullanın.
  • Kart ve Konteyner KöşeleriModern UI tasarımında kartlar, konteynerler ve paneller için standart yuvarlatılmış köşeler.
  • Avatar ve Profil Resmi ŞekilleriProfil resimleri için doğru köşe stilini oluşturun: dairesel, squircle veya yuvarlatılmış kare.
  • Haplar, Etiketler ve Badge'ler9999 ön ayarı ile mükemmel şekilde yuvarlatılmış hap düğmeleri, etiketler ve badge'ler oluşturun.
  • Asimetrik Köşe TasarımlarıKarakteristik, marka tarafından tanınabilir kart ve düğme şekilleri oluşturmak için köşeler arasındaki yarıçapları karıştırın.

Nasıl çalışır

Kenar yuvarlaklığı oluşturucu tamamen tarayıcıda çalışır — sunucu, kütüphane ve yükleme yoktur. CSS border-radius değer dizesini React durumu ve useMemo kullanarak doğrudan JavaScript'te oluşturur, ardından tarayıcının kendi CSS motorunun şekli gerçek zamanlı çizmesi için canlı bir div öğesine satır içi stil olarak uygular.

  1. 1
    Kaydırıcılar durumu yazar
    Her aralık girişi sekiz sayısal durum değişkeninden birine yazar — eliptik mod için dört yatay ve dört dikey köşe yarıçapı. Birleşik mod, her değeri aynı anda eşitleyen bir setAll yardımcısıyla sekizini de tek bir kaydırıcıda toplar.
  2. 2
    useMemo CSS değerini oluşturur
    Bir useMemo kancası, herhangi bir köşe değeri, birim (px veya %) ya da eliptik anahtarı değiştiğinde border-radius dizesini yeniden hesaplar. Standart modda dört değerli kısaltmayı üretir; eliptik açıkken tam sekiz değerli sözdizimi için eğik çizgi ayırıcıyı ekler — ör. 32px 20px 20px 32px / 20px 32px 20px 32px.
  3. 3
    Tarayıcının CSS motoru önizlemeyi çizer
    Hesaplanan dize, düz bir div öğesine satır içi borderRadius stili olarak atanır. Tüm çizimi tarayıcının yerleşim motoru yapar — canvas, SVG veya üçüncü taraf çizim kodu yoktur.
  4. 4
    Clipboard API çıktıyı kopyalar
    Kopyala'ya tıklamak, seçili biçim anahtarına bağlı olarak CSS bildirimi (border-radius: ...;) veya eşdeğer Tailwind keyfi değer sınıfı (rounded-[...]) ile navigator.clipboard.writeText'i çağırır.

İlgili araçlar

🎨

CSS Kutu Gölgesi Oluşturucu

Canlı önizleme, çok katmanlı yığın, renk seçici, iç gölge geçişi ve tek tıklamayla kopyalamayla CSS kutu gölgesi için görsel oluşturucu. Material, nömorfizm ve parıltı ön ayarları içerir.

Deneyin
🟦

CSS Grid Oluşturucu

Görsel olarak bir CSS grid tasarlayın — izler, birimler ve boşluklar — ve oluşturulan CSS ve HTML'yi kopyalayın.

Deneyin
↔️

CSS Flexbox Oluşturucu

Flex yönü, sarma, yaslama ve hizalama ile canlı öğeler üzerinde deney yapın — ve CSS'i kopyalayın.

Deneyin

Sık sorulan sorular