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:

-moz-border-radius

-moz-border-radius-topleft
-moz-border-radius-bottomleft
-moz-border-radius-topright
-moz-border-radius-bottomright

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:

-webkit-border-radius

-webkit-border-top-left-radius
-webkit-border-bottom-left-radius
-webkit-border-top-right-radius
-webkit-border-bottom-right-radius

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>
<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>

Round Corner DEMO
DOWNLOAD Round corner code

Related posts: