Membuat effect lengkung pada border.

Masih seputar border, pada artikel kali ini ada sedikit penambahan dari artikel sebelumnya pada artikel Modifikasi border untuk desain blog, pada artikel sebelumnya tidak ada efek lengkung, dan untuk kesempatan kali ini saya menambahkan kode untuk memberikan efek lengkung pada border dengan cara menambahkan kode border-radius agar penapilan border pada blog semakin modis, baca juga Multi Color Border menggunakan CSS3, baiklah berikut cara Membuat effect lengkung pada border.

DOUBLE
border: 3px double #333;border-radius: 30px 0px 30px 0px;-moz-border-radius: 30px 0px 30px 0px;-webkit-border-radius: 30px 0px 30px 0px;

DOUBLE
border: 3px double #333;border-radius: 0px 30px 0px 30px;-moz-border-radius: 0px 30px 0px 30px;-webkit-border-radius: 0px 30px 0px 30px;

DOUBLE
border: 3px double #333;border-radius: 40px 40px 40px 40px;-moz-border-radius: 40px 40px 40px 40px;-webkit-border-radius: 40px 40px 40px 40px;

Untuk warna dan ukuran border bisa Anda rubah sesuai selera. intinya untuk memberi efek lengkung pada border kita tinggal menambah border-radius:0px 0px 0px 0px;, untuk 0px diisi dengan jumlah atau angka yang diinginkan, semakin besar angka yang dimasukkan semakin besar efek lengkung yang diberikan, penulisan px juga bisa diganti dengan tanda "%" tanpa tanda kutip, juga bisa disingkas apabila jumlah angka yang dimasukkan kesetiap sudutnya sama bisa disingkat dengan menulis jumlah px atau % dengan satu kali saja, contoh : border-radius:50px;. untuk memberi efek lengkung penuh hingga membentuk lingkaran bisa menulis border radiusnya seperti berikut: border-radius:50%;, seperti pada gambar read more yang ada pada halaman homepage Babble of Ibnoec saya menulis angka border radiusnya dengan angka 50%. Demikian saja yang dapat saya sampaikan, semoga bermanfaat, terimakasih atas kunjungannya.

Share this: