Home / Trik dan Tips Blog / Sudut Melengkung ( Rounded Corners ) pada CSS

Sudut Melengkung ( Rounded Corners ) pada CSS

Posted by Unknown Selasa, 03 Januari 2012 0 komentar

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 :

http://www.roundedcornr.com/
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
http://wigflip.com/cornershop/
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

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul: Sudut Melengkung ( Rounded Corners ) pada CSS
Ditulis oleh Unknown
Rating Blog 5 dari 5

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