Inilah cara membuat border bersudut melengkung.
Kode dasar untuk membuat border melengkung adalah �-moz-border-radius�
melengkung di sudut kanan atas �-moz-border-radius-topright�
melengkung di sudut kiri atas �-moz-border-radius-topleft�
melengkung di sudut kanan bawah �-moz-border-radius-bottomright�
melengkung di sudut kiri bawah �-moz-border-radius-bottomleft�
Secara lengkap contoh kode dalam membuat border melengkung adalah
<div style="-moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; background: #00ff00; border: 3px solid #228b22; padding: 10px; width: 90%;">ini adalah contoh border melengkung sudut kiri dan kanan atas</div>
dan di bawah ini hasilnya;
ini adalah contoh border melengkung sudut kiri dan kanan atas
Keterangan:
5px : ukuran sudut lengkung, makin besar maka makin melengkung
background: #00ff00 : warna background border, anda sesuaikan dengan selera anda
border: 3px solid #228b22 : ukuran ketebalan dan warna border, juga bisa anda ganti
padding: 10px : jarak antara tulisan dengan border,
width: 90% : lebar border sesuai ukuran tempat di blog anda, bisa anda ganti dengan angka misalnya 123px
Dengan menggunakan kode tersebut Anda bisa membuat border hanya melengkung di kanan atas dan kiri bawah, atau suka-suka anda tergantung pada selera anda.
Bila anda ingin bentuk border melengkung disemua sudutnya maka anda cukup menuliskan: �-moz-border-radius: 5px�. Namun kode ini setahu saya efeknya berlaku hanya di broser Mozilla Firefox.
Silahkan kembangkan kreatifitas anda untuk mendapatkan hasil yang terbaik. OK
Post a Comment