Border merupakan garis tepi pada sebuah elemen HTML berbentuk kotak. border biasanya digunakan untuk memperindah tampilan dan menegaskan batas lokasi pada sebuah halaman HTML.
Contoh, biasanya sebuah elemen <p> paragraf tidak memiliki garis tepi atau border, tapi kita bisa mengaturnya menggunakan CSS:
Sintak penulisan border:
Tidak usah khawatir susah untuk mengingatnya, karena urutan penulisannya boleh di acak, semisal:
Tidak masalah dan border tetap tampil.
Contoh, biasanya sebuah elemen <p> paragraf tidak memiliki garis tepi atau border, tapi kita bisa mengaturnya menggunakan CSS:
<p style="border: solid 2px blue">Isi paragraf</p>
|
border: tipe width warna;Tidak usah khawatir susah untuk mengingatnya, karena urutan penulisannya boleh di acak, semisal:
border: warna width tipe;Tidak masalah dan border tetap tampil.
Contoh Membuat Border dengan CSS
<!doctype html> <html> <head> <title>Contoh Penggunaan Font</title> </head> <body> <div id="contoh">Border merupakan hal yang penting pada CSS, jadi pahamilah.</div> <form onsubmit="return false" name="fr"> <b>Edit Border: </b><br /> <select name="tipe"> <option value="solid">Solid</option> <option value="double">Double</option> <option value="ridge">Ridge</option> <option value="inset">Inset</option> <option value="outset">outset</option> <option value="none">none</option> </select> <input type="text" name="ukuran" value="5" /> (px) <input type="text" name="warna" value="red" /> <button type="button" onclick="terapkan()">Terapkan</button> </form> <script type="text/javascript"> var el = document.getElementById('contoh'); function terapkan(){ el.style.border = document.fr.tipe.value + ' ' + document.fr.ukuran.value + 'px ' + document.fr.warna.value; return el.style.border; }</script> </body> </html> |
0 Response to "Belajar Border CSS"
Post a Comment