CSS Border Radius Olusturucu

Dort kose kaydiricisi ve sekiz degerli eliptik mod, canli onizleme ve kopyalanabilir CSS.

Ücretsiz
Tüm araçlar tarayıcınızda çalışır; sunucularımıza hiçbir veri gönderilmez.
Hazir sekiller

CSS Border Radius Olusturucu hakkında

CSS icinde yuzde cinsinden border-radius degerleri her ekseni ayri hesaplar; yani bir dikdortgende yuzde 50 daire degil elips uretir. Egik cizgi (/) soz dizimiyle her kosenin yatay ve dikey yaricapini ayri ayri verebilir, organik damla sekilleri tam olarak boyle olusturulur. Bu arac dort koseyi ve sekiz degerli eliptik modu canli onizleme ve kopyalanabilir CSS ile sunar.

CSS Border Radius Olusturucu nasıl kullanılır

  1. 1

    Basit veya Eliptik modu secin ve birim olarak px ya da yuzde belirleyin.

  2. 2

    Her kose kaydiricisini surukleyin ve onizleme kutusunun canli degistigini gorun.

  3. 3

    Hap, kare-daire veya damla gibi hazir bir sekle tiklayarak hizli baslayin.

  4. 4

    Koseleri bagla secenegini acarak dort koseyi ayni anda ve esit ayarlayin.

  5. 5

    Uretilen border-radius kuralini kopyalayip stil dosyaniza yapistirin.

Sıkça sorulan sorular

border-radius: 50% neden dikdortgen dugmemi daire yapmiyor?

Yuzdeler genislik ve yukseklige ayri uygulanir, bu yuzden kare olmayan bir ogede elips elde edersiniz. Gercek hap sekli icin kisa kenarin yarisindan buyuk bir px degeri kullanin ya da Hap hazir seklini secin.

border-radius degerindeki egik cizgi (/) ne ise yarar?

Egik cizgiden onceki degerler yatay yaricap, sonraki degerler dikey yaricaptir. Bu ayrim organik damla koselerini mumkun kilar.

Bu damlalar gercek Apple kare-daireleri mi?

Hayir. Gercek bir squircle bir superelipstir ve border-radius ile birebir uretilemez; bu arac SVG veya clip-path olmadan tarayiciya tam uyumlu yakin bir yaklasim verir.

Dort deger hangi sirada yazilir?

Ust sol, ust sag, alt sag, alt sol — ust sol koseden saat yonunde. Bazi degerler esit oldugunda arac ciktiyi otomatik kisaltir.