Langsung ke konten utama
LibraTool logoLibraTool

Generator Border Radius CSS gratis

Rancang sudut membulat secara visual dengan kontrol independen atas setiap sudut. Mendukung sintaks X/Y elips untuk bentuk blob organik.

Berfungsi offline setelah dimuat
border-radius: 20px 20px 20px 20px;
Satuan

Penggunaan umum

  • Bentuk Blob OrganikGunakan sintaks elips X/Y untuk membuat bentuk blob unik untuk bagian hero dan ilustrasi.
  • Sudut Kartu dan KontainerSudut bulat standar untuk kartu, kontainer, dan panel dalam desain UI modern.
  • Bentuk Avatar dan Foto ProfilBuat gaya sudut yang tepat untuk foto profil: melingkar, squircle, atau bujur sangkar bulat.
  • Pil, Tag, dan BadgeBangun tombol pil, tag, dan badge yang bulat sempurna dengan preset 9999.
  • Desain Sudut AsimetrisCampurkan radius di seluruh sudut untuk membuat bentuk kartu dan tombol yang khas dan dapat dikenali merek.

Cara kerja

Generator border-radius berjalan sepenuhnya di browser β€” tidak ada server, tidak ada library, dan tidak ada unggahan. Ini membangun string nilai CSS border-radius langsung dalam JavaScript menggunakan React state dan useMemo, lalu menerapkannya sebagai gaya inline pada elemen div langsung sehingga mesin CSS browser sendiri merender bentuknya secara real time.

  1. 1
    Penggeser menulis state
    Setiap masukan rentang menulis ke salah satu dari delapan variabel state numerik β€” empat radius sudut horizontal dan empat vertikal untuk mode elips. Mode terpadu menciutkan kedelapannya menjadi satu penggeser melalui helper setAll yang menyinkronkan setiap nilai sekaligus.
  2. 2
    useMemo merangkai nilai CSS
    Hook useMemo menghitung ulang string border-radius setiap kali nilai sudut, satuan (px atau %), atau toggle elips berubah. Dalam mode standar, ini menghasilkan singkatan empat-nilai; dengan elips aktif, ditambahkan pemisah garis miring untuk sintaks delapan-nilai penuh β€” misalnya 32px 20px 20px 32px / 20px 32px 20px 32px.
  3. 3
    Mesin CSS browser merender pratinjau
    String yang dihitung diatur sebagai gaya inline borderRadius pada elemen div polos. Mesin tata letak browser melakukan semua rendering β€” tidak ada canvas, tidak ada SVG, dan tidak ada kode gambar pihak ketiga.
  4. 4
    Clipboard API menyalin keluaran
    Mengklik Salin memanggil navigator.clipboard.writeText dengan deklarasi CSS (border-radius: ...;) atau kelas nilai-sembarang Tailwind yang setara (rounded-[...]), tergantung toggle format yang dipilih.

Alat terkait

🎨

Generator Box Shadow CSS

Pembangun visual untuk box-shadow CSS dengan pratinjau langsung, penumpukan multi-lapisan, pemilih warna, toggle inset, dan salin satu klik. Termasuk prasetel Material, neumorphism, dan glow.

Coba
🟦

Generator CSS Grid

Desain CSS grid secara visual β€” track, unit, dan gap β€” lalu salin CSS dan HTML yang dihasilkan.

Coba
↔️

Generator CSS Flexbox

Eksperimen dengan flex direction, wrap, justify dan align pada item langsung β€” dan salin CSS.

Coba

Pertanyaan yang sering diajukan