CSS Round Corner tanpa image
Ada berbagai cara untuk menghasilkan round corner ( sudut yang melengkung) boks suatu DIV. Agar dapat kompatibel dengan semua browser memang kebanyakan dengan mengatur CSS elemen div dipadukan dengan background image yang sudutnya melengkung.
Namun bila tujuan kita membuat desain round corner untuk pengguna browser Mozilla atau Safari tidak perlu susah payah mengatur CSS elemen DIV dengan memadukan background image dan border. Gunakan saja properti CSS3 yang sudah didukung masing-masing browser tersebut.
Untuk browser Mozilla dan turunannya kita dapat menggunakan properti berikut:
[css]
-moz-border-radius
-moz-border-radius-topleft
-moz-border-radius-bottomleft
-moz-border-radius-topright
-moz-border-radius-bottomright
[/css]
Dengan menggunakan properti -moz-border-radius kita dapat mengatur kelengkungan seluruh sudut elemen DIV. Lain halnya dengan -moz-border-radius-bottomleft, properti tersebut digunakan untuk melengkungkan sudut kiri bawah. Besarnya kelengkungan dapat diatur berdasarkan presentase % lebar atau tinggi border atau langsung dengan satuan pixel
Untuk browser Safari kita dapat menggunakan properti berikut:
[css]
-webkit-border-radius
-webkit-border-top-left-radius
-webkit-border-bottom-left-radius
-webkit-border-top-right-radius
-webkit-border-bottom-right-radius
[/css]
Begitu juga untuk properti -webkit-border-radius berfungsi untuk mengatur semua kelengkungan sudut elemen DIV untuk browser Safari. Fungsi properti lain seperti -webkit-border-top-right-radius untuk mengatur kelengkungan sudut kanan atas DIV dst.
Berikut contoh penggunaan properti tersebut:
[html]
<html>
<head>
<title>Contoh Round Corner tanpa image</title>
<style type="text/css">
#bokslengkung {
width:200px;
height:auto;
padding:10px;
margin:5px;
font-family:"Trebuchet MS", Arial, Verdana;
font-size:12px;
color:#666666;
text-align:center;
/* properti round corner */
border:solid 2px #33BAC1;
-moz-border-radius-bottomleft: 15%;
-moz-border-radius-topright: 15%;
-webkit-border-bottom-left-radius: 15px;
-webkit-border-top-right-radius: 15px;
/* properti round corner */
}
</style>
</head>
<body>
<div id="bokslengkung">
<strong>round corner</strong> <em>tanpa image</em> <br>
dengan properti CSS3</div>
</body>
</html>
[/html]
Round Corner DEMO
DOWNLOAD Round corner code
Filed under: CSS, Tutorial | 5 Comments
Tags: CSS, CSS3, round corner
datang berkunjung menyapa sahabat…
makasi kunjungan sob
maaf, jika memasang mini banner dari blognusantara.com tp ga muncul, tolong tanda kutip nya di ketik ulang, makasih
Cuma jalan di browser berbasis Gecko dan Web kit ajah.. di IE & Opera g bakal jalan..
di awal artikelnya uda disebutin round corner utk Mozilla dan Safari