Membuat sudut bulat Container Blogspot

Pada awalnya template blog ini mempunyai sudut lancit disetiap ruasnya dan di modifikasi sekian rupa hingga tampil beda dari Magazine Template R.1.5 yang mana template asli dari kang rohman sebagai Publisher.Tapi yang akan kita bahas bukan itu.yang akan kita bahas disini adalah bagaimana memodifikasi template dengan membuat sudut pada tiap ruas berbentuk bulat (border radius).

Okey..waktunya kita bermain main dengan CSS,untuk anda yang berminat silahkan ikuti latihan kita kali ini.

Untuk membuat sudut bulat pada setiap ruas kita hanya sedikit membutuhkan kode css tambahan (CSS3).Tapi sayangnya dibeberapa browser tidak bisa menampilkan bentuk sudut bulat tersebut dikarenakan tidak suport dengan kode stylesheet CSS3 yang makin lama semakin berkembang seperti misalnya Internet Explorer (IE) dan Opera.Tapi dengan menggunakan Mozilla Firefox bentuk ruas sudut bulat itu bisa tampil sempurna.

Sebagai media latihan , saya akan mencoba untuk membuat sudut bulat pada Header (judul) halaman blogspot.

/* header */ #header-wrapper{ width:960px; font-size:12px; margin:0 auto; margin-bottom:10px; padding:0; overflow:hidden; background:#000000 url(http://2.bp.blogspot.com/_VrWujqfSgyA/TS8zmRcfImI/AAAAAAAAAeg/-yfxiuI3SGE/s1600/gg.jpg) left no-repeat;}

Kode diatas adalah bagian dari CSS Header pada blog saya sebelumnya...dengan contoh style diatas bentuk dari sudut header blog masih berbentuk sudut lancip.Nah..sekarang saya coba menambahkan dengan kode CSS dibawah ini.

-moz-border-radius-bottomright:15px; -moz-border-radius-bottomleft:15px;

Properties : -moz-border-radius-bottomright:15px; » mengartikan bahwa pada sudut bawah sebelah kiri akan membentuk sudut bulat dengan radius 15px .

Properties : -moz-border-radius-bottomleft:15px; » mengartikan bahwa sudut bawah sebelah kanan akan membentuk sudut bulan dengan radius 15px .

Saya akan memberikan contoh css dan hasilnya seperti dibawah ini :

Contoh CSS

<style type="text/css">
<!--
#contohsudutbulat {
background-color: #FF9900;
height: 100px;
width: 400px;
border: 1px solid #666666;
-moz-border-radius-bottomleft:15px;
-moz-border-radius-bottomright:15px;
}
-->
</style>

Hasil Priview

contoh sudut bulat pada sisi bawah bagian kiri dan kanan
15px

Contoh CSS

<style type="text/css">
<!--
#contohsudutbulat {
background-color: #FF9900;
height: 100px;
width: 400px;
border: 1px solid #666666;
-moz-border-radius-bottomleft:15px;
-moz-border-radius-topright:15px;
}
-->
</style>

Hasil Priview

sudut bulat pada sisi bawah bagian kiri dan atas kanan
15px

Contoh CSS

<style type="text/css">
<!--
#contohsudutbulat {
background-color: #FF9900;
height: 100px;
width: 400px;
border: 1px solid #666666;
-moz-border-radius-topleft:25px;
-moz-border-radius-topright:25px;
}
-->
</style>

Hasil Priview

sudut bulat pada sisi atas bagian kiri dan atas kanan
25px

Contoh CSS

<style type="text/css">
<!--
#contohsudutbulat {
background-color: #FF9900;
height: 100px;
width: 400px;
border: 1px solid #666666;
-moz-border-radius:50px;
}
-->
</style>

Hasil Priview

sudut bulat pada semua sisi
50PX