Membuat Rounded corner - sudut Bulat

r050

Rounded corner atau bentuk sudut suatu kotak (elemen) dengan tepi sudut berbentuk bulat, Bentuk ini menggunakan kode radius yang nilainya menentukan bulatnya sudut tersebut,untuk mengurangi kebingungan, langsung saja kita praktikkan langkah - langkahnya,
Pertama buat kode cssnya dahulu dengan menentukan nilai radiusnya:
Equaivalent radius dapat menggunakan pixel atau em,
Kedua membuat kode htmlnya.
contoh kodenya adalah:

Equivalent 2em;

border-top-left-radius:2em; = membuat sudut bulat pada tepi atas bagian kiri.
border-top-right-radius:2em; = membuat sudut bulat pada tepi atas bagian kanan.
border-bottom-right-radius:2em; = membuat sudut bulat pada tepi bawah bagian kiri.
border-bottom-left-radius:2em; = membuat sudut bulat pada tepi bawah bagian kanan.

border-top-left-radius: 2em 0.5em;
border-top-right-radius: 1em 3em;
border-bottom-right-radius: 4em 0.5em;
border-bottom-left-radius: 1em 3em;

kita contohkan membuat sudut bulatan untuk sebuah gambar:

code css:

#corner {background:url(salin alamat gambar disini);
border:1px solid #00ff00;
margin: 5 0 0 80px;
padding: 5px;
width:440px;
height:240px;}
#corner img{ border:2px solid #000; border-top-left-radius:2em;
border-top-right-radius:2em;
border-bottom-right-radius:2em;
border-bottom-left-radius:2em;
height:230px; width:430px;}

code html:
<div id="corner">
<img src="salin alamat gambar disini" /></div>
</div>

Untuk membuat sudut bulat pada bagian atas saja, tentu yang digunakan hanya
border radius top left dan right,
sedang untuk membuat sudut bulatan pada bag bawah saja, cukup menggunakan
border radius bottom left dan right,
Anda dapat juga membuat sudut bulatan pada bagian kiri atas dan bagian kanan bawah, atau yang lainnya menurut kebutuhan Anda, nilai dapat dirubah tergantung nilai yang anda inginkan untuk bentuk sudut bulat tersebut, (rounded corner)selamat mencoba.