Cara menggunakan Generator Border Radius
- Geser slider untuk membulatkan keempat sudut — atau pilih Tiap sudut untuk mengatur kiri-atas, kanan-atas, kanan-bawah, dan kiri-bawah secara terpisah.
- Ganti satuan:
pxuntuk pembulatan tetap,%agar menyesuaikan ukuran elemen (50% pada persegi menghasilkan lingkaran). - Pilih Elips atau Blob acak untuk bentuk organik dengan 8 nilai.
- Salin CSS-nya — nilainya sudah dipersingkat ke jumlah paling sedikit yang menghasilkan bentuk yang sama.
Cara kerja nilai border-radius
| CSS | Sudut |
|---|---|
border-radius: 12px | semua empat |
border-radius: 12px 4px | kiri-atas & kanan-bawah, kanan-atas & kiri-bawah |
border-radius: 12px 8px 4px 0 | kiri-atas, kanan-atas, kanan-bawah, kiri-bawah (searah jarum jam) |
border-radius: 40% 60% 70% 30% / 40% 50% 60% 50% | elips: radius horizontal / radius vertikal — bentuk blob |
Tombol pill: gunakan nilai besar seperti 9999px — browser membatasi nilainya hingga setengah tinggi, jadi ujungnya tetap bulat pada ukuran apa pun. Lingkaran: 50% pada elemen persegi. Persentase dihitung relatif terhadap lebar kotak (radius horizontal) dan tinggi kotak (radius vertikal).
Terkait: Box Shadow Generator, CSS Gradient Generator, Glassmorphism Generator.
Juga dicari sebagai: border radius generator, css border radius, generator rounded corners css, cara membuat sudut membulat css, border-radius generator online, css blob generator, membuat tombol pill css, css rounded corners generator.
Tool yang cocok dipakai bersama Generator Border Radius
- CSS Grid Generator — Atur kolom, baris, dan gap, lalu seret di atas sel untuk membuat area seperti header, sidebar, dan main.
- Generator CSS Filter — Atur blur, brightness, contrast, saturation, hue, grayscale, sepia, invert dan drop shadow pada contoh atau gambarmu sendiri, lalu salin CSS filter-nya.
- Generator Cubic Bezier — Atur kurva easing dengan menyeret dua handle, lalu adu dengan easing standar.
- Generator Animasi CSS — Desain animasi CSS di atas timeline keyframe sungguhan.
Pertanyaan yang sering diajukan
Bagaimana cara membuat sudut membulat di CSS?
Gunakan border-radius, misalnya border-radius: 12px untuk semua sudut, atau empat nilai untuk kiri-atas, kanan-atas, kanan-bawah, dan kiri-bawah.
Bagaimana cara membuat tombol berbentuk pill?
Atur border-radius ke nilai besar seperti 9999px. Browser membatasinya hingga setengah tinggi, jadi ujungnya selalu bulat sempurna.
Bagaimana cara membuat lingkaran?
Beri elemen lebar dan tinggi yang sama, lalu gunakan border-radius: 50%.
Apa arti garis miring (/) di border-radius?
Nilai sebelum garis miring adalah radius horizontal dan nilai sesudahnya radius vertikal, sehingga tiap sudut menjadi elips. Begitulah bentuk blob dibuat.
Bisakah saya memasang Generator Border Radius sebagai aplikasi web dan memakainya offline?
Bisa. Generator Border Radius adalah aplikasi web (PWA) yang bisa dipasang. Pemasangannya lewat browser kamu, bukan diunduh dari toko aplikasi. Klik Pasang aplikasi di bagian atas halaman ini di Chrome atau Edge (Windows, macOS, Linux, ChromeOS) atau di Android. Di iPhone dan iPad, gunakan Bagikan → Tambahkan ke Layar Utama, dan di Safari 17+ pada Mac, gunakan File → Tambahkan ke Dock. Setelah itu, aplikasi akan terbuka di jendelanya sendiri dengan ikonnya sendiri. Karena berjalan sepenuhnya di browser kamu, aplikasi ini tetap bisa dipakai offline. Firefox di desktop tidak bisa memasang aplikasi web. Cara memasang aplikasi.