Membuat Rounded Corners dengan CSS

Mungkin Anda sering kali membutuhkan tampilan dengan sudut melengkung tidak lancip. Cara tradisional untuk membuat itu dengan membuat image berupa 1/4 lingkaran yang ditempatkan dimasing-masing sudut. Namun kini hal itu tidak perlu Anda lakukan lagi, karena CSS telah mampu membuatnya untuk Anda. Pada post ini saya akan memberitahukan cara membuatnya.
1. Pertama-tama buatlah sebuah file html kosong.
2. Buat sebuah div dengan id rounded.

 <div id="rounded">
Ini adalah div dengan rounded corners.
</div>

3. Lalu buatlah style

<style>

 #rounded {

border : solid 1px #ddd;

-ie-border-radius : 9px;

-moz-border-radius : 9px;

-webkit-border-radius : 9px;

} 

</style>

4. Save dan lihatlah hasilnya pada browser kesayangan Anda :)

Mungkin hal yang perlu Anda ketahui adalah awalan border-radius seperti -ie-, -moz-, -webkit-. Awalan tersebut merujuk pada browser. Awalan ie merujuk kepada Internet Expoler, moz untuk Mozilla, dan webkit untuk Safari. Sekarang coba hilangkan salah satu baris tersebut dan jalankan pada browser baris yang dihilangkan, lihat apakah rounded cornersnya ada??? tidak ada bukan. Semoga bermanfaat.