Generator Border Radius CSS

Generator yang menampilkan sudut sebagaimana digambar di kotak sungguhan

Generator Border Radius CSS menentukan radius keempat sudut, membuat kode border-radius, dan menampilkan bagaimana nilai itu digambar pada kotak berukuran asli. Jika kartu selebar 320px dan setinggi 200px diberi border-radius: 16px;, keempat sudutnya terpotong menjadi seperempat lingkaran berradius 16px. Jika radius horizontal dan vertikal ditentukan terpisah, Anda juga bisa membuat sudut elips dengan garis miring (/), seperti border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;.

Ketik angka pada kolom sudut atau seret gagang pada rel di panggung, maka bentuk dan kode berubah bersamaan. Jika radius terlalu besar sehingga kurva yang bersebelahan saling tumpang tindih, browser mengecilkan semua radius dengan rasio yang sama. Alat ini menampilkan nilai yang sudah mengecil itu lewat garis bantu dan bilah pemeriksa sisi, lalu satu klik pada "Pakai nilai yang mengecil" menyamakan angka di kolom dengan yang tampak di layar. Anda juga bisa melihat nilai yang sama dipasang pada tombol, tag, kolom input, kartu, foto, dan foto profil, serta radius dalam untuk foto di dalam kartu.

Mengapa menentukan hanya dari angka sering meleset

Nilai 24px yang sama menghasilkan bentuk pil dengan kedua ujung setengah lingkaran pada tombol setinggi 44px, tetapi hanya sudut yang sedikit membulat pada kartu besar. Persentase dihitung terhadap lebar dan tinggi kotak masing-masing, sehingga pada kotak yang bukan persegi hasilnya bukan lingkaran melainkan sudut elips. Karena itu radius perlu dilihat bersama ukuran kotak yang akan dipasangi, dan itulah alasan alat ini menampilkan ukuran kotak dan pratinjau elemen sungguhan berdampingan.

• Saat menetapkan tingkat kebulatan di design system: sebelum memutuskan nilai seperti tombol 8px dan kartu 16px, bandingkan dalam satu layar bagaimana nilai yang sama terlihat pada tombol, tag, kartu, dan foto.
• Saat memindahkan nilai dari desain ke kode: masukkan ukuran kotak dari desain apa adanya lalu sesuaikan nilai sudutnya, maka kasus di mana browser mengecilkan gambar sudah terlihat sebelum kode ditempel.
• Saat membuat tombol pil atau foto bulat: periksa pada kotak mana 9999px dan 50% menghasilkan bentuk yang sama, dan pada kotak mana berbeda.
• Saat butuh bentuk organik seperti tetesan atau blob: menyesuaikan delapan nilai dengan garis miring secara manual cukup merepotkan. Mulailah dari contoh, lalu haluskan dengan gagang.
• Saat memasukkan foto atau tombol ke dalam kartu: jika elemen dalam diberi nilai yang sama dengan luar, celah di sudut terlihat lebih tebal. Isi jarak, dan alat ini langsung menghitung radius dalam yang tepat.

Cara memakai

1. Pada "Pilih bentuk", klik bentuk yang paling dekat, atau masukkan lebar dan tinggi kotak sesuai ukuran yang akan dipakai.
2. Pilih satuan (px atau %) dan jenis radius (bulat atau elips). Jika memilih elips, tiap sudut mendapat kolom horizontal (↔) dan vertikal (↕), dan rel radius vertikal muncul di kiri dan kanan panggung.
3. Ketik angka pada keempat kolom sudut atau seret gagang pada rel. Saat gagang difokuskan, tombol panah mengubah nilai 1, dan dengan Shift 10. Jika "Samakan 4 sudut" aktif, mengubah satu sudut membuat sudut lainnya ikut berubah.
4. Jika bilah pemeriksa sisi menjadi oranye, artinya jumlah radius pada sisi itu lebih panjang daripada sisinya sehingga browser mengecilkan gambar. Jika butuh angka yang sama dengan tampilan di layar, klik "Pakai nilai yang mengecil".
5. Lihat lewat "Lihat dalam ukuran asli" apakah nilainya masih cocok untuk elemen lain, lalu bawa kodenya dengan "Salin CSS". Format bisa dipilih antara satu baris atau properti per sudut, dan antara px atau rem. "Salin tautan" menyimpan pengaturan saat ini di alamat URL.

Urutan nilai dan penulisan singkat

Nilai border-radius dimulai dari kiri atas lalu searah jarum jam ke kanan atas, kanan bawah, dan kiri bawah. Jika nilai yang ditulis lebih sedikit, sudut yang tidak disebut menyalin nilai sudut yang sudah ditulis. Jika kiri bawah dihilangkan, nilainya sama dengan kanan atas; jika kanan bawah dihilangkan, nilainya sama dengan kiri atas; dan jika kanan atas juga dihilangkan, nilainya sama dengan kiri atas.

Jika menulis dua nilai, yang berpasangan adalah sudut diagonal, bukan atas dan bawah. Nilai sebelum garis miring adalah radius horizontal, nilai setelahnya radius vertikal, dan keduanya mengikuti aturan penulisan singkat yang sama. Untuk mengubah satu sudut saja, gunakan border-top-left-radius, border-top-right-radius, border-bottom-right-radius, dan border-bottom-left-radius. Di sini tidak dipakai garis miring, dan nilai horizontal serta vertikal dipisahkan spasi, misalnya 40px 20px. Kode "Satu baris" pada alat ini menuliskan nilai yang sama seringkas mungkin, sedangkan "Per sudut" menuliskan keempat properti secara terpisah.

Perbedaan penggambaran px dan %

Radius px selalu sama panjang, apa pun ukuran kotaknya. Pada radius %, radius horizontal dihitung terhadap lebar border box dan radius vertikal terhadap tingginya. Jadi 10% yang sama pada kartu selebar 300px dan setinggi 180px menghasilkan sudut elips berukuran 30px horizontal dan 18px vertikal. Tabel di bawah menunjukkan radius (horizontal × vertikal) yang benar-benar digambar browser ketika nilai yang sama dipasang pada tiga ukuran.

Jika ingin kebulatan yang sama pada elemen berukuran berbeda, px yang tepat. Jika butuh kurva yang proporsional dengan ukuran kotak, pilih %. Saat satuan diganti di alat ini, nilai dihitung ulang agar bentuk yang sedang digambar tetap sama. Jika px diganti ke % pada kotak yang bukan persegi, nilai horizontal dan vertikalnya berbeda, sehingga hasilnya menjadi radius elips.

Mengapa nilai besar tidak membuat sudut makin bulat

Spesifikasi membandingkan jumlah radius dua sudut yang menyentuh suatu sisi dengan panjang sisi itu. Pada sisi atas dan bawah, jumlah dua radius horizontal dibandingkan dengan lebar. Pada sisi kiri dan kanan, jumlah dua radius vertikal dibandingkan dengan tinggi. Dari keempat sisi, ambil nilai terkecil dari "panjang sisi ÷ jumlah radius" dan sebut f. Jika f kurang dari 1, semua radius dikalikan f saat digambar. Seperempat lingkaran tetap seperempat lingkaran, dan radius besar tetap lebih besar daripada radius kecil, tetapi sudut yang sebenarnya sudah cukup kecil ikut mengecil.

Pada baris ketiga, radius besar di kiri atas membuat tiga sudut lain, yang ditetapkan 10px, mengecil menjadi 6.25px. Untuk menjaga sudut kecil tetap akurat, turunkan radius yang besar hingga masuk dalam panjang sisi. 9999px yang lazim dipakai untuk tombol pil memanfaatkan aturan ini. Radius mengecil sampai setengah sisi yang lebih pendek, sehingga kedua ujung selalu setengah lingkaran meskipun tingginya berubah.

Sudut elips dan garis miring

Satu sudut adalah seperempat elips yang memiliki radius horizontal dan radius vertikal. Jika keduanya sama, hasilnya seperempat lingkaran, dan jika berbeda, kurvanya memanjang ke satu arah. border-radius: 50% / 60% 60% 40% 40%; membuat semua radius horizontal setengah lebar, sedangkan radius vertikal dua sudut atas 60% tinggi dan dua sudut bawah 40%, sehingga bentuknya telur yang lebih panjang di bagian atas. Jika nilai horizontal dan vertikal keempat sudut dibuat berbeda semua, hasilnya bentuk seperti blob yang terlihat digambar tangan.

Jika salah satu dari radius horizontal atau vertikal bernilai 0, sudut itu digambar siku tanpa kurva. Namun nilai pada sisi yang bukan 0 tetap masuk ke jumlah radius pada sisi tersebut, sehingga bisa menjadi penyebab sudut lain mengecil. Saat digambar di Chrome pun, sudut lain ikut mengecil sesuai spesifikasi. Radius tidak boleh negatif, dan deklarasi yang berisi nilai negatif diabaikan.

Radius elemen dalam: luar − jarak

Saat foto diletakkan di dalam kartu dengan jarak di keempat sisi, sudut foto sebaiknya melengkung lebih ke dalam sejauh jarak itu, sehingga celah di antara dua kurva terlihat merata. Spesifikasi juga menentukan kurva bagian dalam kotak dengan cara yang sama. Radius padding edge adalah radius luar dikurangi tebal border, dan radius area konten adalah hasil itu dikurangi lagi dengan padding. Jika hasilnya kurang dari 0, nilainya 0.

Jika elemen dalam diberi nilai yang sama dengan luar, celah di bagian sudut menjadi lebih tebal daripada di sisinya, dan foto terlihat terdorong ke dalam. Pada "Selaraskan sudut dalam" di atas, kedua kasus itu bisa dibandingkan berdampingan. Walau radius luar ditentukan dengan %, nilai dalam dikeluarkan dalam px, yaitu radius yang digambar dikurangi jarak.

Saat foto di dalam keluar dari sudut

Memberi radius pada kotak induk tidak otomatis memotong elemen anak. Menurut spesifikasi, latar dipotong mengikuti kurva, tetapi agar anak tidak keluar dari kurva, overflow induk harus diubah ke nilai selain visible (yaitu hidden atau clip). Acuan pemotongannya adalah kurva di bagian dalam border. Radius juga bisa diberikan langsung pada foto, karena pada elemen pengganti seperti img, isinya dipotong mengikuti kurvanya sendiri.

Radius juga mempersempit area yang bisa diklik. Peristiwa pointer ikut terpotong mengikuti border yang membulat, sehingga jika tombol 44 × 44px diberi 50%, area yang bisa ditekan menyusut menjadi sekitar 78.5%, yaitu luas lingkaran. Spesifikasi juga menyarankan agar lebar dan tinggi dibuat cukup besar untuk memenuhi ukuran sentuh minimum yang dianjurkan saat radius besar dipakai.

Nilai untuk bentuk yang sering dipakai

Ini nilai dari dua belas bentuk pada "Pilih bentuk". Bentuk yang sama hanya muncul jika ukuran kotak dipakai bersamanya. Khususnya nilai %, bentuknya ikut berubah saat rasio kotak berubah.

Dukungan browser dan properti baru corner-shape

border-radius sudah lama didukung semua browser utama, jadi bisa dipakai tanpa prefiks. Pada halaman yang ditulis dari kanan ke kiri atau secara vertikal, properti logis seperti border-start-start-radius membuat sudutnya berganti sesuai arah penulisan. corner-shape dalam Editor's Draft CSS Borders 4 adalah properti yang mengubah bentuk kurva di dalam area yang ditentukan radius menjadi salah satu dari round, squircle, bevel, scoop, notch, square, atau superellipse(). Properti ini masih eksperimental sehingga baru tampil di Chrome 139 ke atas, dan pratinjau alat ini hanya menggambar kurva membulat dari border-radius.

Kesalahan yang sering terjadi

• Mengira urutannya berlawanan arah jarum jam: keempat nilai berurutan kiri atas → kanan atas → kanan bawah → kiri bawah, searah jarum jam.
• Membaca dua nilai sebagai atas dan bawah: pada 16px 8px, kiri atas dan kanan bawah bernilai 16px, sedangkan kanan atas dan kiri bawah 8px. Untuk membulatkan bagian atas saja, gunakan 16px 16px 0 0.
• Memberi 50% pada persegi panjang lalu mengharapkan bentuk pil: jika lebar dan tinggi berbeda, 50% menghasilkan elips. Pil yang hanya kedua ujungnya setengah lingkaran dibuat dengan nilai px yang sama dengan setengah tinggi atau lebih, atau dengan 9999px.
• Memasukkan garis miring di setiap sudut: jika garis miring dipakai dua kali seperti 10px / 20px 30px / 40px, seluruh deklarasi diabaikan. Garis miring hanya ditulis satu kali, di antara daftar nilai horizontal dan daftar nilai vertikal.
• Hanya memberi radius pada induk sehingga foto keluar: beri induk overflow: hidden, atau beri juga radius pada foto.
• Memberi elemen dalam nilai yang sama dengan luar: celah menebal di sudut. Gunakan radius luar dikurangi jarak.
• Mengira acuan radius % hanya satu: radius horizontal mengacu pada lebar dan radius vertikal pada tinggi, jadi pada kotak yang bukan persegi, % yang sama menghasilkan dua panjang yang berbeda.

Batasan dan catatan

• Satuan input adalah px dan %. rem adalah format keluaran yang menampilkan nilai px dibagi ukuran font root 16px, dan satuan seperti em atau vw tidak ditangani.
• Radius sampai satu desimal, dengan px 0 sampai 9999 dan % 0 sampai 100. Kotak berukuran lebar 40 sampai 800px dan tinggi 40 sampai 600px. Kotak yang lebih besar daripada panggung ditampilkan mengecil, dan skalanya ditulis di kiri atas panggung.
• Ukuran kotak dianggap sudah termasuk border. Jika elemen sungguhan punya border atau padding dan box-sizing-nya content-box, ukuran yang menjadi acuan radius % lebih besar daripada lebar dan tinggi yang Anda masukkan.
• Spesifikasi mengizinkan browser mengecilkan radius lebih jauh jika kurva bertabrakan dengan elemen layar seperti scrollbar. Dalam kasus itu, hasilnya bisa digambar lebih kecil daripada perhitungan alat ini.
• Radius dalam dihitung dengan anggapan jarak di keempat sisi sama. Jika jarak kiri-kanan berbeda dari atas-bawah, kurangi jarak kiri-kanan pada radius horizontal dan jarak atas-bawah pada radius vertikal.
• corner-shape tidak dipratinjau. Kehalusan tepi kurva bisa terlihat sedikit berbeda tergantung skala layar dan rasio piksel perangkat.

Tanggal acuan W3C CSS Backgrounds and Borders Module Level 3 (Candidate Recommendation Draft 2024-03-11), CSS Borders and Box Decorations Module Level 4 (Editor's Draft 2026-10-15), dan data kompatibilitas MDN (browser-compat-data 8.1.6) diperiksa pada sumber aslinya tanggal 2026-10-22. Angka pada tabel dihitung dengan inti perhitungan alat ini, dan pengecilan akibat tumpang tindih serta penanganan sumbu bernilai 0 dicocokkan dengan gambar sungguhan di Chromium 151.

Sumber

• 01W3C: CSS Backgrounds and Borders Module Level 3Candidate Recommendation Draft 2024-03-11. §4.1 urutan nilai, penghilangan, garis miring, acuan %, nilai negatif tidak valid; §4.2 kurva dalam (luar − border); §4.3 pemotongan mengikuti kurva; §4.5 kurva yang tumpang tindih f = min(L/S)
• 02MDN: border-radiusSintaks dan contoh, kompatibilitas browser (empat nilai: Chrome 4, Firefox 4, Safari 5; nilai %: Chrome 8, Firefox 4, Safari 5.1)
• 03W3C CSSWG: CSS Borders and Box Decorations Module Level 4Editor's Draft 2026-10-15. Nilai corner-shape: round, scoop, bevel, notch, square, squircle, superellipse()
• 04MDN: corner-shapeFitur eksperimental, data kompatibilitas: Chrome 139, Firefox dan Safari hanya versi pratinjau
• 05MDN: border-start-start-radiusProperti sudut logis yang mengikuti arah penulisan, data kompatibilitas: Chrome 89, Firefox 66, Safari 15

Pertanyaan yang sering diajukan

Alat yang dipakai bersama