Membuat Rounded Corner Sederhana

Beberapa hari ini sudah blog saya ini tidak update, ya dalam beberapa hari ini kesibukan offline saya lebih banyak dan juga komputer saya baru upgrade motherboard dan proses instalasinya , sehingga saya harus dalam keadaan offline untuk sementara, nah barulah malam ini kembali lagi ke blog tercinta ini, ^_^ ,, !!!!!
Wokeh postingan kali ini saya akan kembali dengan tutorial html lagi,..!! langsung aja ya....!!
Sobat - sobat sekalian sudah tahukan yang namanya sidebar, yang berbentuk kotak - kotak itu lo, biasanya berada disamping disebuah halaman blog atau website, nah kali ini kita akan memberikan effect sedehana dengan rounded corner (border lengkung) menggunakan image dan css..!!!
Memang teknik ini sudah banyak dibahas di blog - blog atau website lain, namun kali ini akan saya posting lagi itung - itung nambahin arsip ,, hee

Oh iya hampir lupa, anda membutuhkan tiga buah gambar berfornat gif, untuk bagian atas , isi, dan bawah. Nah untuk bagian atas dan bawahnya , buatllah gambar berbentuk lengkung, sebagai contoh ketiga gambar tersebut dapat anda lihat dibawah ini :

atas.gif

isi.gif

bawah.gif

Script html nya sebagai berikut :

#kotak

{ margin:0px; padding:0px; position:absolute; width:250px; float:left; }

#kotak h2

{ font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-style: normal; font-weight: bold; color: #FF0000; text-decoration: none; background:url("atas.gif") 0 0 no-repeat; width:250px; height:30px; padding-left:17px; padding-top:10px; margin:0px; }

#kotak .isi

{ background:url("isi.gif") 0 0 repeat-y ; width:240px; padding:20px; margin:0px;}

#kotak p

{ font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-style: normal; font-weight: bold; color: #000000; text-decoration: none; margin:0px; padding:0px; }

#kotak .bawah

{ background:url("bawah.gif") 0 0 no-repeat; width:250px; height:30px; }

</style>
</head>
<body>
<div id="kotak">
<h2>Rounded Box By Spirit 89 Blog</h2>
<div class="isi">
<p> Isi ........................................... </p>
<p> Isi ........................................... </p>
<p> Isi ........................................... </p>
<p> Isi ........................................... </p>
<p> Isi ........................................... </p>
<p> Isi ........................................... </p>
<p> Isi ........................................... </p>
<p> Isi ........................................... </p>
<p> Isi ........................................... </p>
<p> Isi ........................................... </p>
</div>
<div class="bawah">

</div>
</div>
</body>
</html>

Simpanlah dengan ektensi html, liat hasilnya di browser web anda., maaf nih ya sobat - sobat untuk tutorial kali tidak terlalu saya bahas secara detail,, he

Sekian dulu postingan kali ini,, Semoga bermanfaat,,, keep spirit...!!!!