MEMBUAT BORDER PADA HTML ATAU POSTING
Dalam dunia html banyak istilah yang kita kenal, yang diantaranya border atau garis. Ada 2 jenis border yang kita kenal. hehehehe...... kalau tidak salah y.... yang pertama boder tidak terlihat untuk jenis ini kita hanya menambahkan kata none.
Contohnya : Border : none; atau kita juga bisa merubah warna border menjadi sama dengan warna background, maka border tersebut menjadi tidak terlihat, dan yang ke 2 adalah border yang terlihat dan jenis ini bentuknya beragam, bisa berupa garis padat ataupun putus-putus. Fungsi border itu sendiri selain sebagai pembatas antara elemen, juga dapat menimbulkan keindahan template apalagi perpaduan antara warna garis, bentuk dan warna lainya serasi.
untuk lebih jelasnya sobat bisa copy script dibawah ini dan letakan dalam postingan.
Border jenis solid
Border jenis dotted
Border jenis dashed
Border jenis ridge
Border jenis groove
Border jenis inset
Border jenis outset
Border jenis double
Border dengan scroll lebar dan tinggi
<div style="border: 4px #345d15 solid; padding: 10px; background-color: #eaeaea; text-align: left"> MASUKAN TEKS DISINI </div>
Border jenis dotted
<div style="border: 4px #345d15 dotted; padding: 10px; background-color: #eaeaea; text-align: left;"> MASUKAN TEKS DISINI </div>
Border jenis dashed
<div style="border: 4px #345d15 dashed; padding: 10px; background-color: #eaeaea; text-align: left;"> MASUKAN TEKS DISINI </div>
Border jenis ridge
<div style="border: 4px #345d15 ridge; padding: 10px; background-color: #eaeaea; text-align: left;"> MASUKAN TEKS DISINI </div>
Border jenis groove
<div style="border: 4px #345d15 groove; padding: 10px; background-color: #eaeaea; text-align: left;"> MASUKAN TEKS DISINI </div>
Border jenis inset
<div style="border: 4px #345d15 inset; padding: 10px; background-color: #eaeaea; text-align: left;"> MASUKAN TEKS DISINI </div>
Border jenis outset
<div style="border: 4px #345d15 outset; padding: 10px; background-color: #eaeaea; text-align: left;"> MASUKAN TEKS DISINI </div>
Border jenis double
<div style="border: 4px #345d15 double; padding: 10px; background-color: #eaeaea; text-align: left;"> MASUKAN TEKS DISINI </div>
Border dengan scroll lebar dan tinggi
<div style="border: 4px #345d15 solid; padding: 10px; background-color: #eaeaea; overflow: auto; height: 60px; width: 260px; text-align: left;"> TULIS MASUKAN TEKS DISINI </div>
8 komentar — Skip to Comment
sudah aku link bro. link balik ya. aplikasitangguh.blogspot.com
Terimakasih bro..
ini artikel yg ku cari2..
akhirnya ketemu juga
Untuk yang rounded ko' ga ada? Terus untuk memodifikasi yang ada biar bisa rounded, bagaimana? Terima kasih.
Thx gan tutorialnya:D
nice post gan.. sangat membantu... thanksss :)
Mantaps..sudah dipraktekkan di blog ane...thanks
kalo membuat efek postingan yang satu dengan yang lain terpisah oleh kotak, bisa tidak mas? misalnya kita memunculkan 2 postingan di halaman utama yang masing2 berada dalam kotak
Alhamdulillah berhasil bikin border untuk pesan sponsor di blogku. Terimakasih!!
Posting Komentar — or Back to Content