----------------------------------------------------
kalau tidak bisa bikin RC di photoshop, ada tools dari third party. Klik disini
----------------------------------------------------
Tau dengan rounded corner gak? itu lho, background, image, atau apalah yang sudutnya itu berbentuk bulat. Nilainya dinyatakan dengan radius.
Ada tiga cara yang paling lazim digunakan (*sebenarnya ada 4
), tetapi yang gw suka hanya 3 
. Tutorialnya tuh sudah banyak di Google, jadi saya tidak akan menjelaskannya secara lebih terperinci. Mungkin akan diberikan link ke target langsung.1. Background menggunakan Images
Ini yang paling mudah. Caranya dengan menyatakan background sebagai images langsung. Ada dua extention yang selalu digunakan (*sebenarnya 3, tetapi yang gw suka hanya 2
) yaitu *GIF dan *PNG, bisa juga *JPG.*JPG => tentunya harus menyesuaikan dua warna sekaligus antara warna background dan warna rounded cornernya, gw malas pakai yang ini.
*GIF => Kualitasnya tidak terlalu bagus.
*PNG => Tidak bekerja di IE6 yang nb tidak mendukung alpha transparancy. Meskipun masih bisa diakali tetapi caranya akan rumit.
#menubottom{
width:100%;
margin:0 0 0px;
height:46px;
background:#40534a url(http://img706.imageshack.us/img706/8813/navmenu2radius7.png) no-repeat;
}
oh iya, karena IE sangat sensitif untuk pengaturan margin dan padding termasuk hal yang lainnya...jadi kadang images/background tidak muncul.
2. Property Rounded Corner
Keuntungannya karena ini cara termudah, gw sudah coba di Safari, Chrome dan Mozilla FF (*kalau tidak salah
) dan berhasil dengan baik, untuk Opera belum. kekurangannya? Jangan terlalu berharap di IE sekeluarga.Property-nya:
==> -moz-border-radius:7px; /* untuk mozilla FF */
==> -webkit-border-radius:7px; /* untuk Safari */
Gw gak tau Chrome yang mana...
Contoh:
#header1{
background: #8a9c8e;
margin: 10px 0;
text-align: center;
color:$pagetitlecolor;
width:490px;
height:90px;
float:right;
overflow:hidden;
-moz-border-radius:7px;
-webkit-border-radius:7px;
Pengembangannya seperti dibawah ini :
-moz-border-radius-bottomleft:7px; /* kiri bawah */
-moz-border-radius-bottomright:7px; /* kanan bawah */
-moz-border-radius-topright:7px; /* kanan atas */
-moz-border-radius-topleft:7px; /* kiri atas */
3. CSS selector
Sudah ditulis dengan jelas disini
Caranya agak rumit, tetapi bekerja baik untuk semua browser. Pengaturan margin dan padding sangat berpengaruh. Untuk hasil yang terbaik, margin/padding harus ber-value: 0px;...tergantung posisinya (boleh pasang auto).
Selain itu, cara ini tetap mengandalkan images. Hanya saja yang diambil hanya bagian rounded-nya . Posisi peletakannya diatur oleh CSS selanjutnya dipanggil dibagian HTML.
