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>
|
No comments:
Post a Comment