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 :

1. http://www.roundedcornr.com/
2. http://www.generateit.net/rounded-corner/index.htm?r=10&fg=ffff&bgt=1&f=png&w=500&bg=&h=600&bc=000000&aa=1&bw=3&submit=Generate+It
3. http://wigflip.com/cornershop/
4. http://www.spiffycorners.com/

Adapun cara lain membuat rounded corner ini dengan menggunakan kode default dalam CSS, kode yang digunakan adalah :



Support Firefox :



-moz-border-radius-topleft:10px;

-moz-border-radius-topright:10px;


-moz-border-radius-bottomleft:10px;

-moz-border-radius-bottomright:10px;



Support Safari :



-webkit-border-top-left-radius:10px;

-webkit-border-top-right-radius:10px;

-webkit-border-bottom-left-radius:10px;

-webkit-border-bottom-right-radius:10px;

Berikut adalah contoh rounded corner pada Browser pendukung :

Kotak 1 - Rounded Corner pada semua sudut

Kotak 2 - Rounded Corner pada pojok-kiri-atas

Kotak 3 - Rounded Corner pada pojok-kiri-bawah

Kotak 4 - Rounded Corner pada pojok-kanan-bawah

Kotak 5 - Rounded Corner pada pojok-kanan-atas

<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