Dengan bantuan CSS kita bisa membuat sebuah kotak tanpa sudut/membulat/melengkung. Biasanya kotak seperti ini disebut dengan “rounded box“.
Dan untuk membuatnya ternyata cukup mudah.
Baca dan ikuti panduan langkah demi langkah dalam tutorial ini.
- Diperlukan 4 gambar yang masing-masing berukuran 4X4 pixel:
aka.gif (sudut atas kanan)
aki.gif (sudut atas kiri)
bka.gif (sudut bawah kanan)
bki.gif (sudut bawah kiri)
Simpan/download semua file di atas ke dalam harddisk anda.
- Selanjutnya buat sebuah file css baru dengan nama misalnya box.css dan isi dengan kode berikut:
.boxborder{
border:1px solid #656565;
background-color:#f9f9f9;
}
.boxisi{
margin:10px;
}
.atas, .atas .kiri, .bawah, .bawah .kiri {
display:block;
height:4px;
position:relative;
}
.atas, .bawah{
width:100%;right:-1px;
}
.atas .kiri, .bawah .kiri{
width:4px;left:-2px;
}
.atas{
background:transparent url("aka.gif") no-repeat top right;
top:-1px;
}
.atas .kiri{
background:transparent url("aki.gif") no-repeat top left;
}
.bawah{
background:transparent url("bka.gif") no-repeat bottom right;
bottom:-1px;
}
.bawah .kiri{
background:transparent url("bki.gif") no-repeat bottom left;
} - Selanjutnya buat sebuah file html baru dengan nama misalnya tes.htm.
<html>
<head> </head>
<body> </body>
</html> - Di antara <head>…</head> letakkan perintah untuk memuat file css style yang sudah dibuat pada langkah 2:
<style type="text/css">@import url(box.css);</code> - Di dalam <body>…</body> masukkan kode berikut:
<div class="boxborder">
<span class="atas"><span class="kiri"></span></span>
<div class="boxisi">
<center>Rounded Box</center>
</div>
<span class="bawah"><span class="kiri"></span></span>
</div> - Selesai. Tinggal buka file tes.htm di browser yang anda gunakan, bisa Firefox, IE, Opera, atau Safari. Namun sebelum menjalankan pastikan semua file berada dalam folder yang sama.
Download
Untuk yang malas mengetik, tinggal copy-paste aja kode di atas… 
Untuk yang sangat malas 
bisa langsung download semua file yang diperlukan untuk tutorial ini roundedbox.zip.
