Generator Radius Border CSS

Memahami Shorthand border-radius

Properti CSS border-radius didefinisikan dalam W3C CSS Backgrounds and Borders Module Level 3. Shorthand-nya menerima hingga empat nilai untuk sudut melingkar dan hingga delapan (dipisahkan dengan garis miring) untuk sudut elips. Urutan sudutnya tetap: top-left, top-right, bottom-right, bottom-left, searah jarum jam dari top-left, persis seperti Anda membaca jam dinding. Spec tersebut tidak ambigu: «Jika bottom-left dihilangkan maka sama dengan top-right. Jika bottom-right dihilangkan maka sama dengan top-left. Jika top-right dihilangkan maka sama dengan top-left.»

Empat longhand per-sudut memungkinkan Anda menargetkan satu sudut tanpa menulis yang lain: border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius. Masing-masing menerima satu nilai (sudut melingkar) atau dua nilai (x y elips).

Piksel, Persentase, dan Trik 50%

Spec W3C mendefinisikan cara persentase diselesaikan: «Persentase untuk radius horizontal merujuk pada lebar border box, sedangkan persentase untuk radius vertikal merujuk pada tinggi border box.» Ini menghasilkan konsekuensi penting: border-radius: 50% membuat lingkaran sempurna hanya saat elemen berbentuk persegi. Pada persegi panjang 200×100, 50% di setiap sudut menghasilkan elips: radius horizontal 100px (setengah lebar) dan radius vertikal 50px (setengah tinggi).

Kapan menggunakan satuan mana:

• Piksel (px): Sudut yang tepat dan tetap yang tidak diskalakan bersama elemen. Terbaik untuk tombol, kartu, dan komponen UI yang konsisten.
• Persentase (%): Diskalakan bersama elemen. Gunakan 50% untuk lingkaran atau elips pada komponen yang berubah bentuk.
• em / rem: Diskalakan bersama ukuran font. Berguna untuk tombol yang radius sudutnya harus tumbuh bersama teks di dalamnya.
• calc(): Campurkan satuan, misalnya calc(8px + 0.5em) untuk dasar yang diskalakan sedikit bersama ukuran teks.

Trik Pil

Menyetel border-radius lebih besar dari setengah sisi terpendek elemen menjepit setiap sudut ke setengah lingkaran sejati, menghasilkan bentuk pil terlepas dari lebar. Konvensinya adalah border-radius: 9999px, angka cukup besar sehingga tidak ada elemen realistis yang akan pernah melebihinya. Inilah mengapa .rounded-pill Bootstrap menggunakan 50rem (~800px) dan rounded-full Tailwind v4 menyelesaikan ke calc(infinity * 1px): keduanya mengkodekan ide yang sama, bahwa angka lebih besar dari kotak menjamin pil di elemen mana pun.

Sudut Elips dan Bentuk Blob Organik

Bentuk delapan nilai (bergarismiring) adalah yang digunakan desainer untuk membuat bentuk «blob» organik dan asimetris yang telah populer untuk ilustrasi hero dan latar belakang dekoratif. Setiap sudut mendapat radius horizontal yang berbeda sebelum garis miring dan radius vertikal yang berbeda setelahnya, menghasilkan kurva yang tidak terbatas pada busur melingkar.

/* Asymmetric blob */
.blob {
  width: 280px;
  height: 280px;
  background: linear-gradient(135deg, #6366f1, #ec4899);
  border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}

Varian Logical-Property untuk Tata Letak RTL

CSS Logical Properties Module Level 1 memperkenalkan empat longhand logis yang beradaptasi dengan arah penulisan:

• border-start-start-radius: top-left dalam LTR bahasa Inggris, top-right dalam RTL Arab / Ibrani.
• border-start-end-radius: top-right dalam LTR, top-left dalam RTL.
• border-end-start-radius: bottom-left dalam LTR, bottom-right dalam RTL.
• border-end-end-radius: bottom-right dalam LTR, bottom-left dalam RTL.

Berguna saat komponen yang sama harus terlihat simetris di kedua arah baca: sudut «mouth» gelembung obrolan, misalnya, harus selalu berada di sisi pembicara, bukan selalu di sebelah kiri. Perlu dicatat bahwa belum ada shorthand logical-property, sehingga Anda harus menulis keempat longhand secara terpisah untuk memilih sudut yang peka RTL.

Tepi Luar vs Tepi Dalam Saat Border Tebal

Radius berlaku pada tepi luar border. Browser secara otomatis menghitung radius konsentris yang lebih kecil untuk tepi dalam sehingga border tidak tampak tidak kontinu di sudut. Konsekuensi praktis: radius luar 16px dengan border 2px akan memiliki radius dalam sekitar 14px, sehingga border terlihat seperti bingkai dengan ketebalan konstan di sekelilingnya. Setel background-clip: padding-box jika Anda ingin warna latar belakang berhenti di tepi dalam border alih-alih menerobos ke bawahnya.

Konvensi Ukuran Praktis

Kesalahan Umum

1. Menggunakan 50% pada elemen non-persegi dan mengharapkan lingkaran. 50% pada persegi panjang adalah elips. Baik pertahankan elemen berbentuk persegi atau gunakan border-radius: 9999px untuk pil sejati.
2. Melupakan urutan sudut. Shorthand-nya searah jarum jam dari top-left (TL TR BR BL). Bentuk dua nilai menetapkan pasangan yang bersebrangan secara diagonal, yang mudah disalahingat.
3. Nilai negatif. Spec mendefinisikannya sebagai tidak valid; browser secara diam-diam menjepit ke nol. Jika sudut tidak dibulatkan sesuai harapan, periksa apakah Anda tidak sengaja mengurangi.
4. Elemen induk yang membulatkan bocor ke elemen anak. Elemen dengan border-radius tidak memotong turunannya secara default. Tambahkan overflow: hidden pada induk jika Anda ingin elemen anak berhenti di tepi yang dibulatkan.
5. Properti per-sudut sebelum shorthand. Cascade CSS bersifat peka urutan, jadi border-top-left-radius diikuti oleh border-radius menimpa nilai per-sudut. Letakkan shorthand terlebih dahulu, kemudian penimpaan per-sudut.
6. Mencampurkan % dan px secara canggung. Menyetel radius 50% pada satu sudut dan 12px pada sudut lain jarang menghasilkan apa yang diharapkan desainer. Tetap dalam satu satuan per elemen.
7. Tabel dan border-collapse: collapse. Referensi MDN menyatakannya secara eksplisit: border-radius tidak berlaku pada elemen tabel atau inline-table saat border diciutkan. Beralih ke border-collapse: separate atau terapkan radius ke elemen pembungkus.

Pertanyaan yang Sering Diajukan Lainnya

Mengapa gambar saya tidak mendapat sudut yang dibulatkan?

Jika gambar berada di dalam container dengan border-radius tetapi sudutnya masih terlihat persegi, induk tidak memotong. Tambahkan overflow: hidden ke induk. Atau, terapkan border-radius langsung ke elemen <img>; gambar merespons properti tersebut secara native.

Apakah border-radius memengaruhi performa?

Hampir tidak. Browser modern merender sudut yang dibulatkan di GPU dan biayanya pada dasarnya identik dengan tepi persegi. Pengecualiannya adalah menganimasikan border-radius pada elemen besar setiap frame (dapat memicu layer recompositing), tetapi sudut yang dibulatkan secara statis praktis gratis.

Apakah ini berfungsi di browser lama?

Ya. Setiap browser sejak IE9 mendukung border-radius tanpa prefiks. Varian logical-property (border-start-start-radius dll.) lebih baru: Chrome 89+, Firefox 66+, Safari 15+. Untuk browser lama yang membutuhkan perilaku logis, tulis blok @supports kecil sebagai fallback.

Bagaimana cara membuat gelembung obrolan?

Gunakan empat longhand per-sudut untuk membulatkan tiga sudut dan biarkan yang keempat kecil atau tajam. Itulah sudut «mouth» yang menunjuk ke pembicara. Sebagai contoh, gelembung pesan keluar: border-radius: 16px 16px 4px 16px;. Untuk gelembung yang peka RTL, beralih ke longhand logis agar mulut berbalik sesuai arah baca.

Mengapa tombol pil saya terlihat tidak rata pada lebar elemen yang berbeda?

Pil menjepit setiap sudut ke setengah sisi terpendek, yaitu tinggi untuk tombol tipikal. Jadi tombol yang lebih pendek mendapat radius yang lebih kecil dan tombol yang lebih tinggi mendapat radius yang lebih besar. Itulah perilaku yang diinginkan. Jika Anda ingin radius konstan di setiap tombol tanpa memandang ukuran, gunakan nilai piksel tetap (misalnya border-radius: 24px) alih-alih trik pil.

Bisakah saya menyalin CSS langsung ke proyek Tailwind / Bootstrap?

Ya, CSS yang dihasilkan adalah sintaks standar biasa tanpa dependensi preprocessor atau framework. Dalam Tailwind v4 Anda juga dapat menulis nilai arbitrer sebagai utility (rounded-[12px] atau rounded-[30%/70%]) jika Anda lebih suka tetap dalam gaya utility-class.