Border atau bingkai memang peranya lumayan penting dalam menghias suatu layout website. CSS tiga sudah mulai banyak digunakan pada akhir-akhir ini. CSS3 sendiri memiliki fitur tambahan yang lebih keren menurut saya dibanding versi sebelumnya, pastinya.Namun, jika border itu terlihat melengkung atau rounded akan memiliki kesan yang lain. Biasanya untuk memnuat rounded corner menggunakan image sebagai sudutnya. Tetapi dengan CSS3 kita dapat membuat rounded corner tanpa sebuah image. Dan kita dapat sedikit mengirit page-load kita.
Namun, ada sedikit kendala. yaitu CSS3 rounded corner tidak akan tampil di browser-browser yang belum mendukung CSS3 itu sendiri, seperti Opera dan Internet Explorer (selain IE9).
Sekarang kita mulai prakteknya. Copy dan simpan script dibawah dengan nama rounded_style.html
<html>
<head>
<style> .all, .top-left, .top-right, .bottom-left, .bottom-right {
border:2px solid #000;
text-align:center;
margin-top:5px;
padding:10px;
}
.all{
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
.top-left{
-moz-border-radius-topleft:10px;
-webkit-border-top-left-radius:10px;
}
.top-right{
-moz-border-radius-topright:10px;
-webkit-border-top-right-radius:10px;
}
.bottom-left{
-moz-border-radius-bottomleft:10px;
-webkit-border-bottom-left-radius:10px;
}
.bottom-right{
-moz-border-radius-bottomleft:10px;
-webkit-border-bottom-left-radius:10px;
}</style>
</head>
<body>
<div>contoh rounded corner semua sudut</div><br />
<div>contoh rounded corner di kiri atas</div><br />
<div>contoh rounded corner di kanan atas</div><br />
<div>contoh rounded corner di kiri bawah</div><br />
<div>contoh rounded corner di kanan bawah</div></body>
</html>
Hasilnya tampak seperti dibawah ini
Dengan ini kita dapat membuat border indah tanpa susah-susah membuat dengan image dan mengirit load page kita.
Sekian duli tutorial kali ini, semoga dapat bermanfaat bagi anda.
Salam Sukses Selalu !
