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:

Halo, saya bordernya biasa.

Sekarang Anda akan “diajari” membuat yang seperti ini:

Halo, saya bordernya lengkung.

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:

Halo, saya bordernya lengkung kiri atas dan kanan bawah.

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.

Iklan