Cara memakai
- Pilih Satuan: px untuk radius tetap, atau % untuk radius yang mengikuti ukuran kotak.
- Ketik radius untuk setiap sudut di bawah Kiri atas, Kanan atas, Kanan bawah dan Kiri bawah. Sudut dengan 0 berbentuk persegi.
- Centang Sudut elips (radius vertikal terpisah) jika sebuah sudut harus lebih lebar daripada tingginya, lalu ketik radius vertikalnya.
- Salin deklarasi CSS dan tempel ke aturan elemen Anda.
Cara keempat sudut ditulis
Properti border-radius menerima satu sampai empat radius horizontal, dengan urutan kiri atas, kanan atas, kanan bawah dan kiri bawah. Daftar dengan nilai lebih sedikit mengulang nilai yang ada: dengan dua nilai, yang pertama untuk sudut kiri atas dan kanan bawah, dan yang kedua untuk sudut kanan atas dan kiri bawah. Radius vertikal ditulis setelah garis miring, dengan urutan yang sama.
Tata bahasanya dijelaskan dalam spesifikasi CSS Backgrounds and Borders (dalam bahasa Inggris). Setiap radius berupa panjang atau persentase dari kotak, dan radius nol tidak memerlukan satuan.
border-radius: top-left top-right bottom-right bottom-left / vertical top-left vertical top-right vertical bottom-right vertical bottom-leftBentuk terpendek
Alat membuang setiap nilai yang toh akan diulang oleh singkatan itu. Jika sudut kiri bawah sama dengan kanan atas, nilainya tidak ditulis; jika kanan bawah sama dengan kiri atas, nilai ketiga juga dihapus. Empat sudut yang sama menjadi satu nilai, sehingga 12px 12px 12px 12px ditulis 12px.
Garis miring hanya ditulis jika radius vertikal berbeda dari horizontalnya. Tanpa sudut elips, setiap radius vertikal sama dengan horizontalnya, sehingga tidak ada garis miring yang muncul.
Contoh: kartu dengan sudut elips
Atur sudut kiri atas menjadi 40 px kali 20 px, kanan atas 20 px kali 10 px, kanan bawah 40 px kali 20 px dan kiri bawah 20 px kali 10 px. Radius horizontalnya adalah 40, 20, 40, 20, yang ditulis singkatan itu sebagai 40px 20px. Radius vertikalnya adalah 20, 10, 20, 10, yang ditulisnya sebagai 20px 10px.
Deklarasinya adalah border-radius: 40px 20px / 20px 10px;, dan pratinjau menampilkan sudut yang lebih lebar daripada tingginya.
Pertanyaan yang sering diajukan
Mengapa ada dua kelompok angka yang dipisahkan garis miring?
Kelompok pertama memberi radius horizontal setiap sudut, dan kelompok setelah garis miring memberi radius vertikal. Tanpa garis miring, sebuah sudut berupa busur lingkaran dengan radius yang sama di kedua arah.
Apa yang dilakukan radius dalam persen?
Persentase diambil dari lebar kotak untuk radius horizontal dan dari tingginya untuk radius vertikal. 50 persen pada setiap sudut memberi lingkaran atau elips, tergantung apakah kotaknya persegi atau tidak.
Mengapa urutannya kiri atas, kanan atas, kanan bawah, kiri bawah?
Singkatan itu mengikuti arah jarum jam yang juga dipakai properti kotak lain, dimulai dari kiri atas. Setelah urutan itu diketahui, bentuk yang lebih pendek dengan dua atau tiga nilai mudah dibaca.
Apakah alat ini memeriksa radius terhadap ukuran kotak?
Tidak. Alat hanya memeriksa bahwa setiap radius berupa angka nol atau lebih, dan berada dalam batas 1000 px atau 100 persen. Jika dua radius yang bertetangga berjumlah lebih dari sisi kotak, peramban akan memperkecilnya.
Apakah yang saya ketik disimpan atau dikirim ke server?
Tidak. Pratinjau dan CSS dibuat di peramban Anda. Tidak ada yang disimpan atau dikirim ke server kami, jadi salin deklarasinya sebelum meninggalkan halaman.
Sumber
- W3C: CSS Backgrounds and Borders Level 3, border-radius (dalam bahasa Inggris)
- MDN: border-radius (dalam bahasa Inggris)
Angka dan teks terakhir diperiksa pada Selasa, 10 November 2026.