Generator border radius
CSS border-radius dengan kontrol setiap sudut dalam piksel atau persen, pratinjau langsung, dan kode yang siap disalin.
CSS yang dihasilkan
CSS
border-radius: 12px;
Cara kerja
Generator border radius ini memberi Anda kontrol per sudut untuk CSS border-radius, dalam piksel atau persen, dengan pratinjau langsung dan kode CSS tepat untuk disalin. Tautkan keempat sudut untuk pembulatan seragam, atau lepaskan tautannya untuk membentuk setiap sudut secara independen.
- Pilih satuan
Piksel untuk lengkungan tetap, atau persen untuk lengkungan yang berskala mengikuti elemen.
- Atur setiap sudut
Geser pengatur atau ketik angka yang tepat. Lepaskan tautan untuk membentuk sudut secara independen.
- Salin CSS
Notasi singkat ini otomatis dipersingkat ketika nilai sudutnya sama.
Bentuk singkat border-radius
Properti border-radius menerima hingga empat nilai, selalu dalam urutan ini:
border-radius: top-left top-right bottom-right bottom-left;
Saat keempat sudut sama, peramban menerima satu nilai. Saat kiri atas sama dengan kanan bawah dan kanan atas sama dengan kiri bawah, dua nilai sudah cukup. Alat ini menulis bentuk valid terpendek secara otomatis.
Piksel versus persen
- Piksel: lengkungan tetap yang ukurannya tidak berubah berapa pun ukuran elemen diubah.
- Persen: radius horizontal adalah persentase dari lebar elemen dan radius vertikal adalah persentase dari tingginya, sehingga lengkungan berskala mengikuti kotak. Pada 50% di elemen persegi, keempat sudut bertemu di tengah dan bentuknya menjadi lingkaran.
Saat radius tumpang tindih
Jika radius pada dua sudut yang berbagi satu sisi berjumlah lebih dari panjang sisi tersebut, peramban akan mengecilkan keduanya secara proporsional agar pas. Inilah yang mengubah radius piksel besar pada elemen pendek dan lebar menjadi bentuk pil yang membulat sempurna di setiap ujungnya, tanpa memerlukan CSS tambahan.
Dukungan peramban
border-radius, termasuk nilai persen independen per sumbu, berfungsi di semua peramban terkini. Awalan vendor CSS3 lama seperti -webkit-border-radius tidak lagi diperlukan.
Pertanyaan yang sering diajukan
Bagaimana cara menetapkan nilai border-radius yang berbeda untuk setiap sudut dalam CSS?
Properti singkat border-radius menerima hingga empat nilai dengan urutan kiri atas, kanan atas, kanan bawah, kiri bawah: border-radius: 12px 8px 20px 4px;. Nonaktifkan Tautkan semua sudut di alat ini, lalu atur setiap penggeser atau kolom angka secara individual, dan salin CSS yang dihasilkan yang menggunakan sintaksis lengkap empat nilai tersebut.
Bagaimana cara membuat lingkaran dengan border-radius CSS?
Tetapkan border-radius ke 50% pada elemen yang memiliki lebar dan tinggi sama. Panel Prasetel menyertakan opsi Lingkaran yang menetapkan keempat sudut ke 50% dan membuat kotak pratinjau berbentuk persegi agar terlihat jelas. Kode CSS yang dihasilkan hanyalah border-radius: 50%; jika diterapkan pada elemen berukuran 100 kali 100 piksel, kode ini akan menghasilkan lingkaran sempurna.
Apa perbedaan antara satuan px dan persen untuk border-radius?
Nilai piksel menghasilkan lengkungan sudut tetap tanpa memedulikan ukuran elemen, sehingga pembulatan tetap konstan saat kotak diubah ukurannya. Nilai persen relatif terhadap lebar dan tinggi elemen itu sendiri, sehingga persentase yang sama terlihat berbeda pada tombol kecil dibandingkan pada kartu besar. Beralihlah antarsatuan dengan pilihan px dan persen di atas penggeser.
Bagaimana cara kerja sakelar Tautkan semua sudut?
Saat Tautkan semua sudut aktif, menggeser salah satu penggeser akan memperbarui keempat sudut ke nilai yang sama, yang berguna untuk pembulatan seragam seperti sudut kartu. Nonaktifkan untuk kontrol mandiri per sudut. Menerapkan prasetel akan selalu menonaktifkan penautan setelahnya agar Anda dapat menyesuaikan hasilnya secara presisi.
Mengapa radius besar terkadang terlihat lebih kecil dari yang diharapkan?
Ketika dua radius sudut yang bersebelahan pada sisi yang sama berjumlah melebihi panjang sisi tersebut, peramban akan mengecilkan keduanya secara proporsional agar lengkungan bertemu tepat di tengah sisi. Pada elemen yang lebar dan pendek, hal ini menciptakan bentuk pil yang sepenuhnya membulat dari nilai piksel biasa, seperti yang ditunjukkan oleh prasetel Pil pada alat ini.