DevToolPal
ID

Generator Border Radius CSS

Atur CSS border-radius per sudut, termasuk sudut elips dan bentuk blob, dalam px, % atau rem, dengan pratinjau langsung, preset, dan CSS terpendek untuk disalin.

Berjalan lokal, tidak pernah diunggah

Sudut

Satuan

Pratinjau

CSS

Preset
CSS border-radius
 
 
 
 
 
Fungsi alat ini


Generator border radius memungkinkan Anda membentuk sudut membulat secara visual dan menyalin CSS terpendek. Gunakan satu radius untuk semua sudut atau radius terpisah per sudut, aktifkan sudut elips agar setiap sudut punya radius horizontal dan vertikal sendiri, dan lihat pratinjau berubah saat Anda menggeser. Mendukung px, %, rem, dan em, dan Anda bisa menempelkan nilai border-radius yang sudah ada untuk diedit. Semuanya berjalan di browser Anda.


Cara pakai


    

  1. Mulai dari preset atau gunakan bentuk contoh.
    2. 

  2. Pilih Satuan. Mengganti satuan mengonversi nilai saat ini (rem dan em dihitung 16px, % relatif terhadap kotak pratinjau).
    3. 

  3. Aktifkan Radius sama untuk semua sudut untuk satu slider, atau matikan untuk mengatur Kiri atas, Kanan atas, Kanan bawah, dan Kiri bawah secara terpisah.
    4. 

  4. Aktifkan Sudut elips untuk mendapatkan slider Horizontal dan Vertikal di tiap sudut.
    5. 

  5. Ubah ukuran pratinjau dengan Lebar dan Tinggi, lalu salin kode dari kartu CSS. Aktifkan keluaran longhand jika Anda lebih suka empat properti terpisah.
    6. 



Contoh


.avatar { border-radius: 50%; }
.tab    { border-radius: 12px 12px 0 0; }
.blob   { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; }


Perlu diketahui


    

  • Bentuk terpendek. Keluaran menggabungkan nilai yang sama: empat sudut identik menjadi satu nilai, dan bagian setelah garis miring dihilangkan bila semua sudut berbentuk lingkaran.
    • 

  • Persentase mengikuti kotak. Persentase horizontal mengacu pada lebar elemen dan yang vertikal pada tingginya, jadi 50% pada persegi panjang menghasilkan elips, bukan lingkaran.
    • 

  • Radius yang tidak muat dikecilkan bersama oleh browser — itulah sebabnya nilai px yang sangat besar menghasilkan pil yang rapi.
    • 

  • Elemen anak dan overflow. Sudut membulat memotong latar dan border, tetapi tidak memotong konten anak: tambahkan overflow: hidden untuk memotong gambar di dalam kotak.
    • 

 
  
 
FAQ
 
 
  › Apa arti garis miring pada border-radius?  
Nilai sebelum garis miring adalah radius horizontal dan nilai sesudahnya radius vertikal. Jika berbeda, sudut menjadi seperempat elips, bukan lingkaran. Misalnya 50% / 30% menghasilkan lengkung yang lebih pipih daripada 50%.
 
  › Dalam urutan apa empat sudut ditulis?  
Searah jarum jam dari kiri atas: kiri atas, kanan atas, kanan bawah, kiri bawah. Jika nilainya lebih sedikit, CSS mengulanginya: dua nilai mengatur kiri atas/kanan bawah dan kanan atas/kiri bawah, tiga nilai mengatur kiri atas, kanan atas/kiri bawah, dan kanan bawah.
 
  › Bagaimana membuat lingkaran atau bentuk pil?  
border-radius: 50% mengubah persegi menjadi lingkaran dan persegi panjang menjadi elips. Untuk pil dengan ujung bulat di lebar berapa pun, gunakan panjang yang sangat besar seperti 9999px: browser mengecilkan radius yang tidak muat, sehingga ujungnya tetap bulat sempurna.
 
  › Bagaimana bentuk blob dibuat?  
Blob memakai delapan persentase berbeda: empat radius horizontal dan empat vertikal, seperti 30% 70% 70% 30% / 30% 30% 70% 70%. Pilih preset blob, aktifkan Sudut elips, lalu geser slider tiap sudut untuk mengubah bentuknya.