Cara Membuat Border Cantik Bersudut Melengkung

Border Cantik Bersudut Melengkung-Bagi Anda yang suka mengotak atik tampilan blog, maka selalu ada hal baru yang ingin anda ubah, begitu Anda melihat yang lama dapat diubah. Nah kali ini saya ingin berbagi tentang membuat border yang sudut-sudutnya melengkung. Biasanya border dalam halaman blog bersudut siku-siku. Border yang dapat anda gunakan untuk mengemas widget tertentu sehingga tampil lebih elegan, misalnya untuk border gadged komentar terbaru, daftar isi, border daftar menu, membuat tab view, dan lainnya.Dalam membuat border bersudut melengkung, anda dapat mengatur sudut mana yang akan dibuat melengkung. Bahkan anda juga bisa membingkai artikel dalam border melengkung dengan warna tertentu.
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

Menarik untuk Dibaca:

Trik Blog

• Akibat Jarang Update Blog
• Membuat Widget Label dalam Scrolbar
• Membuat Breadcrumbs Terindeks Google
• Membuat Widget Entri Populer Cantik
• Segera Nonaktifkan Arsip Blog Anda
• Cara Mengatasi Kredensial OpenID
• Mendulang Trafik dan dollar dari Easyhits4u
• Survey Dibayar Dollar dan Triffic
• Menimbang Penting Tidaknya Buku Tamu
• Melihat Posisi Artikel di Google
• Membuat Background pada Judul Sidebar
• Mengatur Gerak Teks Menggunakan Mouse
• 2 Langkah Pasti Mendatangkan 1 Juta Pengunjung
• Cara Mempertahankan Alexarank
• Membuat Artikel Tampil di Halaman Pertama Google
• Cara Membuat Video Dalam Posting
• Cara Membuat 3 Kolom Tambah Gadget
• Ping Spesial Agar Googel Langsung Mengindeks Artikel
• Trik Jitu Mempercepat Loading Blog dengan Compres CSS
• Trik Mengaktifkan Fitur Simpan dan Keluar pada Mozilla Firefox 4

Tutorial

• Akibat Jarang Update Blog
• Cara Membuat Email Khusus PNS
• Menampilkan Data Dengan Memasukkan PIN
• Memproteksi dan Menyembunyikan Formula Excel
• Membuat Background pada Excel
• Membuat Tombol Menu Pada Excel
• Menyembunyikan Tab Sheet pada Excel
• Memberi Warna Angka Otomatis di Excel
• Memberi Warna Otomatis pada Cell
• Membuat Widget Label dalam Scrolbar
• Membuat Breadcrumbs Terindeks Google
• Tutorial Melakukan Disput Payza
• Membuat Widget Entri Populer Cantik
• Segera Nonaktifkan Arsip Blog Anda
• Cara Ampuh Melindungi Acoount Gmail
• Menambahkan Rekening Bank ke Payza
• Transfer Saldo Egopay ke Payza
• Menambahkan Kartu Debet Payza ke Akun Paypal
• Cara Membuat Akun Egopay
• Cara Aktivasi Kartu Debit Payza