Radius Sudut

Terapkan border-radius: 50% pada elemen persegi untuk membuat lingkaran sempurna. Atur keempat sudut ke 50%.

Ya, border-radius dapat memiliki empat nilai individual dengan urutan: kiri atas, kanan atas, kanan bawah, kiri bawah. Ini memungkinkan bentuk asimetris yang unik.

Enam sampai dua belas piksel untuk tombol dan delapan sampai enam belas untuk kartu cocok di sebagian besar antarmuka. Yang lebih penting daripada angka pastinya adalah konsistensi: jika tombol dan kolom isian di layar yang sama punya radius berbeda, tampilannya terasa berantakan. Bila ada gambar di dalam kartu, beri elemen dalamnya radius sedikit lebih kecil daripada yang luar, kalau tidak kedua lengkungannya akan terlihat bertabrakan.

Angka 50% berarti "separuh dari setiap sisi", jadi selama elemennya bukan bujur sangkar, radius mendatar dan tegaknya berbeda dan yang muncul adalah elips. Untuk lingkaran sungguhan, samakan nilai width dan height atau tambahkan aspect-ratio: 1. Kalau Anda ingin bentuk kapsul pada tombol yang lebarnya mengikuti teksnya, pakai nilai tetap besar seperti 9999px alih-alih 50% — ujung-ujungnya akan selalu menjadi setengah lingkaran sempurna pada tinggi berapa pun.