Sudut Melengkung ( Rounded Corners ) pada CSS

Sudut melengkung atau Rounded Corners adalah lengkungan / belokan pada sudut dari suatu bentuk bangunan persegi. Sudut melengkung ini biasa digunakan dalam pembuatan design template agar template menjadi tampak lebih menarik dan tidak terlihat terlalu kaku dan monoton. Ada banyak teknik untuk membuat sudut lengkung dalam CSS berikut adalah situs web penyedia tool pembuatan rounded corner :

Berikut adalah contoh rounded corner pada Browser pendukung :

<div class="kotak">
Rounded Corner pada semua sudut</div>

<div class="kotak2">
Rounded Corner pada pojok-kiri-atas</div>

<div class="kotak3">
Rounded Corner pada pojok-kiri-bawah</div>

<div class="kotak4">
Rounded Corner pada pojok-kanan-bawah</div>

<div class="kotak5">
Rounded Corner pada pojok-kanan-atas</div>
</center>

<style type="text/css">
.kotak
{
width:500px;
border:3px solid #ff0000;
margin:10px;
padding:10px;
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
-moz-border-radius-bottomleft:10px;
-moz-border-radius-bottomright:10px;
-webkit-border-top-left-radius:10px;
-webkit-border-top-right-radius:10px;
-webkit-border-bottom-left-radius:10px;
-webkit-border-bottom-right-radius:10px;
}

.kotak2
{
width:500px;
border:3px solid #ff0000;
margin:10px;
padding:10px;
-moz-border-radius-topleft:10px;
-webkit-border-top-left-radius:10px;

}

.kotak3
{
width:500px;
border:3px solid #ff0000;
margin:10px;
padding:10px;
-moz-border-radius-bottomleft:10px;
-webkit-border-bottom-left-radius:10px;
}

.kotak4
{
width:500px;
border:3px solid #ff0000;
margin:10px;
padding:10px;
-moz-border-radius-bottomright:10px;
-webkit-border-bottom-right-radius:10px;
}

.kotak5
{
width:500px;
border:3px solid #ff0000;
margin:10px;
padding:10px;
-moz-border-radius-topright:10px;
-webkit-border-top-right-radius:10px;
</style>

Sekian artikel dari saya semoga bermanfaat. :) Sincerely Yours

TERIMA KASIH ATAS KUNJUNGAN SAUDARA
Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip, baik itu sebagian atau keseluruhan dari isi artikel ini harap menyertakan link dofollow ke http://azharadzuan.blogspot.com/2012/01/sudut-melengkung-rounded-corners-pada.html. Terima kasih sudah singgah membaca artikel ini.