Cara Membuat Rounded Corner Dengan CSS3

Rounded sering kali kita perlukan ketika hendak membuat sebuah Button atau apapun yang bagian ujungnya menggunakan radius(rounded)/ gampangnya ada lengkungannya. Banyak cara membuat Rounded ini, mulai dari menggunakan Gambar sampai memanfaatkan CSS3, dan kali ini saya akan mengajak anda menggunakan CSS3, jadi perlu diingat Efek dari Rounded ini tidak akan tampil jika anda menggunakan IE dibawah versi 9 atau Browser Jadul.

Dan bagaimana Cara membuat Rounded tersebut?

Disini saya akan membaginya menjadi 5 Bagian, yaitu yang seluruh sisinya Rounded, yang hanya bagian bawah kanan atau bawah kiri, serta bagian atas kanan atau atas kiri.

1. Rounded keseluruhan atau seluruh bagiannya

Bentuknya dapat anda lihat seperti dibawah ini

rounded corner in all, Keterangannya adalah 
.all{
-moz-border-radius:10px;
-webkit-border-radius:10px;

2. Rounded Kiri atas

Bentuknya dapat anda lihat seperti Dibawah ini

rounded corner in top left, Keterangannya adalah 
.top-left{
-moz-border-radius-topleft:10px;
-webkit-border-top-left-radius:10px;
}

3. Rounded Kanan Atas

Bentuknya dapat anda lihat seperti Dibawah ini

rounded corner in top right, Keterangannya adalah 
.top-right{
-moz-border-radius-topright:10px;
-webkit-border-top-right-radius:10px;
}

4. Rounded Kiri Bawah

Bentuknya dapat anda lihat seperti Dibawah ini

rounded corner in bottom left, keterangannya adalah 
.bottom-left{
-moz-border-radius-bottomleft:10px;
-webkit-border-bottom-left-radius:10px;
}

5. Rounded Kanan Bawah

Bentuknya dapat anda lihat seperti Dibawah ini

rounded corner in bottom right, Keterangannya adalah
.bottom-right{
-moz-border-radius-bottomright:10px;
-webkit-border-bottom-right-radius:10px;
}

Setelah anda mengetahui Bentuknya kini tinggal anda praktekan ke dala Postingan, sidebar atau apapun yang ingin anda Rounded.

Dan inilah Kode CSS nya yang dapat anda taruh sebelum Kode ]]></b:skin>:

.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-bottomright:10px;
-webkit-border-bottom-right-radius:10px;
}

Dan Untuk HTMlnya bisa anda letakkan dipostingan atau Widget dan ini dia pemanggilanya:

<div class="all">rounded corner in all</div>

<div class="top-left">rounded corner in top left</div>

<div class="top-right">rounded corner in top right</div>

<div class="bottom-left">rounded corner in bottom left</div>

<div class="bottom-right">rounded corner in bottom right</div>


Mudah bukan? Silahkan Coba dan praktekkan...

Sumber: http://www.css3.info/preview/rounded-border/ yang telah saya ubah untuk keperluan Tutorial.