بِسْمِ اللّهِ
السَّلاَمُ عَلَيْكُمْ وَرَحْمَةُ اللهِ وَبَرَكَاتُهُ
CSS BORDERS STYLE
Pada pertemuan kali ini kita akan membahas / mempelajari memberikan style garis tepi / garis batas pada suatu text paragraf maupun heading.
BARIS KODE PADA FILE HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h2>CONTOH STYLE BORDER</h2>
<p class="dotted">Dotted (Titik-Titik) border.</p>
<p class="dashed">Dashed (Garis Putus) border.</p>
<p class="solid">Solid border.</p>
<p class="double">Double (Garis Ganda) border.</p>
<p class="groove">Groove border.</p>
<p class="ridge">Ridge border.</p>
<p class="inset">Inset border.</p>
<p class="outset">Outset border.</p>
<p class="none">Tanpa Style border.</p>
<p class="hidden">Hidden border.</p>
<p class="mix">Mix (Garis Campuran) border.</p>
</body>
</html> BARIS KODE PADA FILE CSS
p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;} Pada file CSS diatas setiap style borders dibedakan dengan memberikan masing-masing Class CSS. Untuk hasilnya dan agar mudah dipahami silahkan lihat gambar dibawah ini yang merupakan hasil yang ditampilkan pada web browser ketika file HTML yang tertaut file Style.CSS tereksekusi atau dibuka.
Sekian pertemuan kita pada kali ini, untuk materi CSS Borders Style. Tetap semangat belajar, jaga kesehatan, dan kurangi / hindari segala aktifitas diluar rumah sebagai bentuk proteksi diri dalam memerangi pandemi CoViD-19.
