Membuat Border Lengkung di Firefox
| Perhatian! Tips ini hanya dapat diterapkan di Mozilla Firefox. Jika Anda sedang menggunakan browser lain, segera tinggalkan tulisan ini |
Mozilla Firefox mempunyai suatu fitur yang tidak dimiliki oleh browser lain. Firefox me-render CSS dengan caranya sendiri. Salah satu fitur di Firefox adalah tambahan properti CSS khusus Firefox. Salah satu properti CSS itu digunakan untuk membuat border menjadi lengkung, tidak seperti border konvensional. Contohnya, lihat saja kotak peringatan diatas. Bordernya lengkung bukan? Itu bukan memakai gambar, melainkan CSS murni.
Sebelum melanjutkan membaca tulisan ini, Anda harus memastikan bahwa Anda memiliki pengetahuan tentang CSS dan juga Anda sudah harus mengerti tentang properti standar CSS yaitu border. Gua mengasumsikan Anda sudah bisa membuat yang seperti ini:
Sekarang Anda akan “diajari” membuat yang seperti ini:
Membuat border yang melengkung hanya membutuhkan properti CSS -moz-border-radius. Properti ini insyaallah bisa diterapkan di segala sesuatu di HTML yang punya properti border. Pada contoh di atas saya menggunakan DIV. Terserah Anda mau pake apa, TABLE atau BUTTON juga bisa. Sintaks penulisan properti tersebut adalah:
{ -moz-border-radius: kpx };Ganti k dengan ukuran jari-jari kelengkungan border dalam piksel.
Misalnya contoh kotak di atas dibuat dengan kode HTML sebagai berikut:
<div style="-moz-border-radius: 12px; border: 1px solid black; background-color: #c0c0c0; padding: 6px">
Halo, saya bordernya lengkung.
</div>
Hasilnya seperti di atas itu. Cobalah bereksperimen dengan tag HTML lain maupun ukuran radius lain.
Namun, bukan hanya itu saja bisanya. Kelengkungan kotak dapat diatur per sudut, jadi jari-jari kelengkungan di tiap sudut segiempat bisa dibikin beda-beda. Untuk itu, properti -moz-border-radius punya 4 turunan, yaitu:
-moz-border-radius-topleft-moz-border-radius-topright-moz-border-radius-bottomleft-moz-border-radius-bottomright
Masing-masing properti di atas digunakan sebagaimana namanya. TopLeft itu pojok kiri atas, BottomLeft itu pojok kiri bawah, dst. Pemakaiannya sama saja dengan yang tadi. Cukup nama properti & ukuran jari-jari kelengkungan dalam piksel. Misalnya kode yang tadi ana ubah jadi:
<div style="-moz-border-radius-topleft: 12px;-moz-border-radius-bottomright: 12px;border: 1px solid black; background-color: #c0c0c0; padding: 6px">
Halo, saya bordernya lengkung kiri atas dan kanan bawah.
</div>
Maka hasilnya seperti ini:
Dalam contoh di atas, dapat dilihat bahwa tidak semua (empat-empatnya) harus dipakai. Dipakai satu saja juga boleh. Misalnya cuma kiri atas saja yang melengkung, atau terserah Anda.
Sekedar info, efek border lengkung ini sudah dipakai oleh situs Wikipedia Indonesia untuk panel navigasi, tab, dan lainnya. WordPress pun memakai efek ini. Lihat saja tombol-tombol di dashboard. Jika Anda menggunakan browser lain, segalanya akan serba kotak. Makanya, gua merekomendasikan Anda untuk memakai Mozilla Firefox untuk membuka halaman blog ini. Hasilnya sedikit lebih baik.
Mari gunakan Firefox beramai-ramai.
sabbana, 
saya 6:32 am on 11 Agustus 2008 Permalink |
mas, tolong ajarin yg lebih berguna bagi penderita astigmatisme
IPO3L 10:07 am on 15 Agustus 2008 Permalink |
BRAR ANE DAH COBA DI HTML …BISA!!
TP WKTU KU CUBA FI FS…DI CSS NYA KOG NDOOOOH YO…
AP KLO CSS PERLU TAG BEDA YA?
IPO3L 10:13 am on 15 Agustus 2008 Permalink |
NIH CONTOHNYA
/*ALL BOXES EXCEPT CTRL PANEL*/
.commonbox {
-moz-border-radius: 10px;
border-width: 4px;
border-color: #ffffff;
border-style: dotted;
background-color: transparent;
}
tak ad perubahan…sama sekali…….
abrari 6:17 am on 16 Agustus 2008 Permalink |
Kalo friendseter sih CSSnya suangat terbatas. Cuma bisa property tertentu. Pinggiran border ngelengkung termasuk yang gak diizinin ama tu friendseter.
sabbana 3:41 am on 4 Februari 2010 Permalink |
Terima kasih atas tutorial nya, aku jadi lebih semangat membuat design webnya dengan CSS. soalnya kelihatan lebih CUANTIK … :-D
Oemar 9:38 am on 10 Maret 2010 Permalink |
Kalau safari pake Webkit..