CSS border radius generator
Dengan CSS border radius generator, Anda mengatur kelengkungan semua sudut sekaligus atau tiap sudut terpisah, dalam piksel atau persen; bisa juga dibuat elips dengan radius horizontal dan vertikal yang berbeda. Alat ini menulis nilai dalam bentuk valid terpendek, menampilkan empat properti panjangnya, dan menghitung radius yang benar-benar dipakai browser pada ukuran kotak Anda.
Cara menghitung
Apa itu border-radius dan bagaimana browser membacanya?
Border radius adalah properti CSS untuk membulatkan sudut sebuah elemen. Bentuk singkatnya menerima satu sampai empat nilai dengan urutan kiri atas, kanan atas, kanan bawah, kiri bawah – searah jarum jam. Nilai yang tidak ditulis dilengkapi seperti pada margin:
| Nilai | Artinya |
|---|---|
12px | keempat sudut 12 px |
24px 8px | kiri atas dan kanan bawah 24 px, kanan atas dan kiri bawah 8 px |
24px 8px 4px | kiri atas 24 px, kanan atas dan kiri bawah 8 px, kanan bawah 4 px |
12px 12px 0 0 | hanya sudut atas yang membulat |
40px 10px / 20px 5px | elips: radius horizontal sebelum garis miring, radius vertikal sesudahnya |
Alat ini meringkas setiap input menjadi bentuk setara yang terpendek: 10px 10px 10px 10px menjadi 10px; garis miring dengan nilai yang sama di kedua sisi dihapus.
Persen: lebar dan tinggi terpisah
Persen dihitung dari lebar kotak untuk arah horizontal dan dari tinggi kotak untuk arah vertikal. Karena itu 50% mengubah persegi menjadi lingkaran, tetapi persegi panjang 240 × 160 px menjadi elips dengan radius 120 px dan 80 px. Untuk sudut bulat sempurna pada persegi panjang, gunakan piksel.
Jika lengkungan saling tumpang tindih
Jika jumlah dua radius yang bersebelahan lebih panjang dari sisi yang mereka bagi, spesifikasi W3C mengharuskan browser mengecilkan semua radius dengan faktor yang sama f = min(panjang sisi ÷ jumlah dua radius di sisi itu).
Contoh bentuk “pil” pada tombol 200 × 40 px dengan border-radius: 9999px: di sisi kiri dan kanan 9999 + 9999 = 19.998 px berhadapan dengan tinggi 40 px, jadi f = 40 ÷ 19.998 ≈ 0,002. Setiap sudut mendapat 9999 × f = 20 px – tepat setengah tinggi; ujungnya menjadi setengah lingkaran sempurna. “Radius yang dipakai” menampilkan nilai ini untuk kotak Anda.
Border radius di Tailwind dan Bootstrap
Framework menyediakan kelas siap pakai, misalnya rounded-lg atau rounded-full di Tailwind CSS dan rounded, rounded-3, atau rounded-pill di Bootstrap. Semuanya pada akhirnya menghasilkan properti border-radius yang sama; nilai dari generator ini bisa dipakai langsung di CSS Anda sendiri.
Pertanyaan umum
Bagaimana membuat lingkaran dengan CSS?
Beri elemen persegi border-radius: 50%. Pada persegi panjang, 50% menghasilkan elips; untuk ujung bulat (bentuk pil), gunakan nilai piksel yang sangat besar seperti 9999px.
Bagaimana membulatkan sudut atas saja?
Tulis border-radius: 12px 12px 0 0 – hanya kiri atas dan kanan atas yang diberi nilai. Hasilnya sama dengan border-top-left-radius dan border-top-right-radius secara terpisah.
Apa arti garis miring pada border-radius?
Garis miring memisahkan radius horizontal dari radius vertikal. 40px / 20px membulatkan setiap sudut sebagai seperempat elips selebar 40 px dan setinggi 20 px. Dengan paling banyak empat nilai di setiap sisi, total ada delapan nilai.
Mengapa sudutnya lebih kecil dari yang saya atur?
Karena jika tidak, lengkungannya akan saling tumpang tindih. Browser lalu mengecilkan semua radius dengan rasio yang sama – termasuk sudut yang sebenarnya muat. Alat ini menampilkan faktor dan radius yang benar-benar dipakai.
Bagaimana urutan penulisan empat nilai?
Kiri atas, kanan atas, kanan bawah, kiri bawah – searah jarum jam mulai dari kiri atas. Properti panjangnya adalah border-top-left-radius, border-top-right-radius, border-bottom-right-radius, dan border-bottom-left-radius.
Sumber dan dasar hukum
- css-backgrounds-3, § 4.1: W3C – CSS Backgrounds and Borders Module Level 3: the border-radius properties
- css-backgrounds-3, § 4.5: W3C – CSS Backgrounds and Borders Module Level 3: Overlapping Curves
- MDN Web Docs – border-radius
Diperbarui:
Alat terkait
- CSS box shadow generatorBuat box shadow CSS dengan slider: beberapa lapisan, offset, blur, spread, warna dengan alfa, inset dan preset – pratinjau langsung dan salin CSS sekali klik.
- CSS gradient generatorCSS gradient generator: buat gradasi warna linear, radial, atau conic dengan banyak color stop, sudut, dan warna cadangan – pratinjau langsung, CSS siap salin.
- Konversi warna: HEX, RGB, HSL, HSV, CMYKKonversi kode warna: HEX ke RGB, RGB ke HEX, HSL, HSV, HWB, dan CMYK. Masukkan warna dalam format apa pun atau pilih dari color picker, lalu salin hasilnya.
- Cek dan hitung check digit dengan algoritma LuhnValidasi nomor dengan algoritma Luhn (mod 10, ISO/IEC 7812-1) atau hitung check digit-nya – hanya cek format, berjalan sepenuhnya di browser Anda.
- Base64 decode dan encode onlineBase64 decode dan encode online, termasuk Base64url dengan UTF-8 yang benar, serta URL encode/decode (percent-encoding). Pesan error jelas, berjalan di browser.
- Cek Barcode: Check Digit EAN, GTIN, dan ISBNCek barcode online: periksa check digit EAN-8, EAN-13, UPC-A, GTIN-14, dan ISBN-10/13, hitung digit yang hilang, dan ubah ISBN-10 ke ISBN-13 – gratis.