Sudut Melengkung ( Rounded Corners ) pada CSS

Posted by Gani Mugni 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 :
  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
TERIMA KASIH ATAS KUNJUNGAN SAUDARA
Judul: Sudut Melengkung ( Rounded Corners ) pada CSS
Ditulis oleh Gani Mugni
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 http://azharadzuan.blogspot.com/2012/01/sudut-melengkung-rounded-corners-pada.html. Terima kasih sudah singgah membaca artikel ini.

0 komentar:

Posting Komentar

Panduan blog dan SEO support Jual Online Baju Wanita - Original design by Bamz | Copyright of Azhara Blog.