Saya mencari-cari di Mas Google cara membuat border untuk postingan. Saya banyak menemukan berbagai macam border. Salah satunya yang saya dapatkan di http://puji-lestari.pun.bz/
Jom, langsung aja disimak penjelasana Puji Lestari. Live di sarwoediblogspot.blogspot.com
Apash border itu ?
Border bisa di terapkan pada beberapa tag html seperti
- Tabel
- Textarea
- Div style
Antara lain
- Border solid
- Border dotted
- Border dashed
- Border ridge
- Border groove
- Border inset
- Border outset
- Border double
Border- radius
Cara penggunaan border harus menyertakan ukuran ketebalan dan juga warna . Jika tidak di sertakan ukuran ketebalan sama halnya nillai ketebalan nol, dan border tidak terlihat, Beagitu juga warnanya.
Berikut Adalah Contoh membuat Border Pada Tag Div
Border Solid
<div style="border:4px #06f solid; padding:2px;">
Teks disini </div>
Teks disini </div>
Border Dotted
<div style="border:4px #06f dotted; padding:2px;">
Teks disini </div>
Teks disini </div>
Border Dashed
<div style="border:4px #06f dashed; padding:2px;">
Teks disini </div>
Teks disini </div>
Border Ridge
<div style="border:4px #06f ridge; padding:2px;">
Teks disini </div>
Teks disini </div>
Border Groove
<div style="border:4px #06f groove; padding:2px;">
Teks disini </div>
Teks disini </div>
Border Inset
<div style="border:4px #06f inset; padding:2px;">
Teks disini </div>
Teks disini </div>
Border Outset
<div style="border:4px #06f outset; padding:2px;">
Teks disini </div>
Teks disini </div>
Border double
<div style="border:4px #06f double; padding:2px;">
Teks disini </div>
Teks disini </div>
Untuk Border radius adalah border untuk membuat lengkung pada sudut. Namun border yang ini hanya bisa di gunakan dengan yang sudah supot Javascript. karna disini tidak bisa javascript saya tidak bisa memberi contoh.
selain border berbentuk Bingkai segi empat, Border juga bisa di buat pada 1 sisi saja yaitu berbentuk garis .
contoh:
Border garis Sebelah kiri
<div style="border-left:4px solid #06f; padding:2px;>
Teks disini </div>
Teks disini </div>
Border Garis sebelah Kanan
<div style="border-right:4px solid #06f; padding:2px;>
Teks disini </div>
Teks disini </div>
Garis di atas
<div style="border-top:4px solid #06f; padding:2px;>
Teks disini </div>
Garis di bawahTeks disini </div>
<div style="border-bottom:4px solid #06f; padding:2px;>
Teks disin </div>
Teks disin </div>
Keterangan:
4px pada contoh adalah ukuran ketebalan garis. Jika menginginkan lebih kecil bisa menggunakan angka yg lebih kecil .
#06f; Adalah Kode warna jika menginginkan warna lain anda bisa mengganti sesuai keinginan
padding:2px adalah ukuran jarak garis border
sedangkan pada pembuatan garis saya hanya memberi contoh dengan type Solid. Jika anda menginginkan type yang lain, solid bisa di ganti dengan dotted, dashed, atau yang lain sesuai keinginan anda.
Sedangkan untuk penggunaan pada textarea anda tinggan ubah kode di atas .Tulisan div di ganti textarea . untuk tabel tuga sama .
kiranya cukup ini dulu yang bisa aku share pada kesempatan kali ini, Muga bisa di fahami .
Belum ada tanggapan untuk "Border Post"
Post a Comment