ArcaneRain7

Sesuatu yang baru itu wajib dicoba. Beberapa waktu yang lalu, gw disuruh oleh bos buat mengutak-atik tampilan web dinamis yang sudah jadi (baik coding maupun concept). Tapi waktu thu focusnya cuma ngebuat tampilannya soft and smooth aja. Setelah browsing kesana kemari buat nyari ide, akhirnya gw nemuin sesuatu. Gw nemuin cara membuat border image menjadi melengkung alias rounded dan caranya terbilang cukup mudah. Berikut cara membuatnya :

.border { -moz-border-radius-bottomleft:5px; -moz-border-radius-bottomright:5px; -moz-border-radius-topleft:5px; -moz-border-radius-topright:5px; background-color:#EEEEEE; border:1px solid #DDDDDD; padding:5px; }

Sisipkan kode tersebut di CSS. Sekarang gunakan pada image misalnya,

<img src="photo1.jpg" class="border" width="50" height="70">

Dan voila! Inilah hasilnya,






berikut penjelasan tentang kode tersebut:
-moz-border-radius-bottomleft, -moz-border-radius-bottomright, -moz-border-radius-topleft, -moz-border-radius-topright, berfungsi untuk membuat pojok-pojok image(ataskanan,ataskiri,bawahkanan dan bawahkiri) menjadi melengkung. Ketebalannya tergantung pixel yang digunakan. Disini gw make 5 pixel untuk ketebalannya.
background-color, border, padding berfungsi sebagai variasi warna latar, warna pinggiran.

Nah kalo udah taw konsepnya gampangkan buatnya. Namun sayangnya hanya bekerja di browser mozilla firefox.

Smoga bermanfaat^^