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

1 Response to "Cara Membuat Border Cantik Bersudut Melengkung"

Anonymous21 October 2016 at 15:40
Assalamu Alaikum wr-wb, perkenalkan nama saya ibu Rosnida zainab asal Kalimantan Timur, saya ingin mempublikasikan KISAH KESUKSESAN saya menjadi seorang PNS. saya ingin berbagi kesuksesan keseluruh pegawai honorer di instansi pemerintahan manapun, saya mengabdikan diri sebagai guru disebuah desa terpencil, dan disini daerah tempat saya mengajar hanya dialiri listrik tenaga surya, saya melakukan ini demi kepentingan anak murid saya yang ingin menggapai cita-cita, Sudah 9 tahun saya jadi tenaga honor belum diangkat jadi PNS Bahkan saya sudah 4 kali mengikuti ujian, dan membayar 70 jt namun hailnya nol uang pun tidak kembali, bahkan saya sempat putus asah, pada suatu hari sekolah tempat saya mengajar mendapat tamu istimewa dari salah seorang pejabat tinggi dari kantor BKN pusat karena saya sendiri mendapat penghargaan pengawai honorer teladan, disinilah awal perkenalan saya dengan beliau, dan secara kebetulan beliau menitipkan nomor hp pribadinya dan 3 bln kemudian saya pun coba menghubungi beliau dan beliau menyuruh saya mengirim berkas saya melalui email, Satu minggu kemudian saya sudah ada panggilan ke jakarta untuk ujian, alhamdulillah berkat bantuan beliau saya pun bisa lulus dan SK saya akhirnya bisa keluar,dan saya sangat berterimah kasih ke pada beliau dan sudah mau membantu saya, itu adalah kisah nyata dari saya, jika anda ingin seperti saya, anda bisa Hubungi Bpk Drs Tauhid SH Msi No Hp 0853-1144-2258. siapa tau beliau masih bisa membantu anda, Wassalamu Alaikum Wr Wr ..