Membuat Rounded Corner Dengan CSS3

Written by First Ryan

Thursday, 17 June 2010 14:07

CSS3 Rounded Corner Style 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.

Disini kita akan membahas tentang border atau bingkai suatu layout website tepatnya pada sudut atau sering di sebut corner border. Pada suatu layout website yang mempunyai sudut border siku-siku akan terlihat biasa.

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 type="text/css">
.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}
body{font-family:arial;color:#333;font-size:9pt}
.bottom-left{
-moz-border-radius-bottomleft:10px;
-webkit-border-bottom-left-radius:10px}
.bottom-right{
-moz-border-radius-bottomright:10px;
-webkit-border-bottom-right-radius:10px}
</style>
</head>
<body>
<p>hasilnya tampak seperti dibawah ini</p>
<div class="all">contoh rounded corner semua sudut</div>
<div class="top-left">contoh rounded corner di kiri atas</div>
<div class="top-right">contoh rounded corner di kanan atas</div>
<div class="bottom-left">contoh rounded corner di kiri bawah</div>
<div class="bottom-right">contoh rounded corner di kanan bawah</div>
</body>
</html>

hasilnya tampak seperti dibawah ini

contoh rounded corner semua sudut

contoh rounded corner di kiri atas

contoh rounded corner di kanan atas

contoh rounded corner di kiri bawah

contoh rounded corner di kanan bawah

Dengan ini kita dapat membuat border indah tanpa susah-susah membuat dengan image dan mengirit load page kita. Daripada kita harus membuat gambar seperti lingkarang untuk border kita.

Sekian duli tutorial kali ini, semoga dapat membantu anda.

Tags: