Generator border radius
Atur setiap sudut dan salin CSS-nya.
- Berjalan di browser Anda — teks Anda tidak pernah dikirim ke mana pun
- Tanpa pendaftaran, tanpa kuota, gratis dipakai sesering yang Anda mau
Cara kerjanya
border-radius itu sederhana sampai Anda menginginkan tiga sudut membulat dan satu persegi, pada saat itu semua orang harus mencari urutan keempat nilainya.
Urutannya, untuk selamanya
Kiri atas, kanan atas, kanan bawah, kiri bawah — searah jarum jam dimulai dari kiri atas. Urutan searah jarum jam dari kiri atas yang sama juga berlaku untuk shorthand margin, padding, dan border, yang layak dihafal sekali saja.
Piksel atau persen
Piksel memberikan lengkungan yang sama berapa pun ukuran elemennya. Persentase relatif terhadap lebar dan tinggi elemen itu sendiri, sehingga lengkungan ikut berskala — dan radius 50% pada persegi menghasilkan lingkaran sempurna, yang merupakan trik standar untuk avatar bulat.
Bentuk pil
Radius yang lebih besar dari setengah tinggi elemen dibatasi tepat menjadi setengahnya, itulah sebabnya border-radius: 999px dapat diandalkan menghasilkan bentuk pil berapa pun tingginya. Ini lebih tangguh daripada menghitung nilai yang tepat, karena tetap berfungsi ketika konten berubah.
Ketika sudut tampak salah pada elemen bersarang
Kotak membulat di dalam kotak membulat lainnya membutuhkan radius yang lebih kecil pada kotak bagian dalam, dikurangi padding di antara keduanya, atau lengkungannya tidak akan sepusat. Ini detail kecil yang membuat kartu tampak dibuat dengan benar.
Generator border radius — pertanyaan
Dalam urutan apa keempat nilai itu?
Kiri atas, kanan atas, kanan bawah, kiri bawah — searah jarum jam dari kiri atas.
Bagaimana cara membuat lingkaran sempurna?
border-radius: 50% pada elemen yang tepat berbentuk persegi.
Bagaimana cara membuat tombol berbentuk pil?
Gunakan nilai besar seperti 999px. Browser membatasinya hingga setengah tinggi, sehingga berfungsi pada ukuran berapa pun.
Sebaiknya pakai piksel atau persen?
Piksel untuk lengkungan yang konsisten; persen ketika Anda ingin lengkungan ikut berskala dengan elemen.
Apakah berfungsi di mana saja?
Ya. border-radius sudah didukung tanpa awalan selama lebih dari satu dekade.