Membuat Sudut Blok Melengkung di CSS
Sekarang kita akan belajar melengkungkan sudut-sudut
pada sebuah blok. Untuk melakukan ini, gunakanlah
properti border-radius, yang menerima
nilai dalam piksel.
Apa artinya kita menentukan lengkungan,
contohnya, sebesar 10px? Itu adalah radius dari lingkaran
yang dapat dimasukkan ke dalam lengkungan tersebut. Jika
Anda kurang memahami matematika dan kalimat terakhir
tersebut tidak jelas - lupakan saja dan
cukup sesuaikan lengkungannya secara visual. Dengan
pengalaman tertentu, hal ini tidak menjadi masalah (alat
ukur untuk mengukur lengkungan tidak ada,
setidaknya saya belum pernah mendengarnya).
Mari kita lengkungkan sudut-sudut sebuah blok dengan memberikannya
lengkungan sebesar 10px:
<div id="elem"></div>
#elem {
width: 300px;
height: 100px;
border: 1px solid red;
border-radius: 10px;
}
:
Ulangi halaman sesuai dengan contoh berikut:
