Membuat Kotak Bundar, Rounded Corner di Blog Menggunakan CSS

SERI : Belajar Blogging & Web Programming

Apakah anda sering melihat blog atau bagian layout didalamnya berupa kotak dimana sudut-sudutnya bundar? atau dengan kata lain rounded corner.


Sebenarnya caranya mudah saja selain kita bisa menggunakan pengaturan melalui background memakai image tapi kita juga bisa menerapkan style pada CSS tanpa image.

blogDUIT akan menjelaskan satu - persatu dengan detail langkah - langkahnya :

buatlah ID di CSS misalnya :

#bundar {}
kemudian masukan didalammnya kode berikut ini :
border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px;

Anda bisa menggantinya angka 10px dengan angka yang cocok untuk anda. Semakin besar angka, bundaran semakin besar, semakin kecil angka semakin tidak bundar sudut-sudutnya. Dengan kode tersebut, maka setiap tag div yang menggunakan ID tersebut ujung-ujungnya akan bundar.

Inilah kode keseluruhannya :
#bundar {
border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px;
}


Masukan kode tersebut kedalam blok style CSS tempatnya di tag head baca kembali struktur dasar HTML, lihat contoh berikut :

<head>
<style type="text/css"><!--
#bundar {
border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px;
}

-->
</style>
</head>

Penggunaannya :
<div id="bundar">
</div>


Mudah kan?