Kilasan artikel
1. Style Garis atau Border Style
2. Ketebalan Garis atau Border Width
3. Warna Garis atau Border Color
4. Penulisan singkat Garis atau Border Short
Border adalah Garis Tepi atau garis pembatas objek pada html.
Style Garis atau Border Style
Border style merupakan style dari garis tepi yang ingin ditampilkan atau bagaimana style garis ditampilkan. Setidaknya terdapat 11 style dari border ini yang akan dibahas dibawah paragraf ini dimana propertinya adalah border-style.
Contoh:
<!DOCTYPE html>
<html>
<head>
<title>CSS Border</title>
<style>span.dotted {border-style: dotted;}
span.dashed {border-style: dashed;}
span.solid {border-style: solid;}
span.double {border-style: double;}
span.groove {border-style: groove;}
span.ridge {border-style: ridge;}
span.inset {border-style: inset;}
span.outset {border-style: outset;}
span.none {border-style: none;}
span.hidden {border-style: hidden;}
span.mix {border-style: dotted dashed solid double;}</style>
</head>
<body>
<h1>PojokCoding.co.id</h1>
<span class="dotted">Border dotted</span><br /><br />
<span class="dashed">Border dashed</span><br /><br />
<span class="solid">Border Solid</span><br /><br />
<span class="double">Border double</span><br /><br />
<span class="groove">Border groove</span><br /><br />
<span class="ridge">Border ridge</span><br /><br />
<span class="inset">Bordern inset</span><br /><br />
<span class="outset">Bordern outset</span><br /><br />
<span class="none">Tanpa Border</span><br /><br />
<span class="hidden">Border hidden</span><br /><br />
<span class="mix">Border mixed</span>
</body>
</html>
Hasil sintak:
Ketebalan Garis atau Border Width
Ketebalan dari border ini bisa kita atur melalui css dengan properti border-width.
Contoh sintak:
<!DOCTYPE html>
<html>
<head>
<title>CSS Border</title>
<style>span.border { border-style: solid; border-width: 5px; }</style>
</head>
<body>
<h1>PojokCoding.co.id</h1>
<span class="border">Border dotted</span>
</body>
</html>
Hasil sintak:
Catatan: ketebalan pada border bisa menggunakan ukuran spesifik seperti px, pt, cm, em dan sejenisnya atau dengan 3 definisi yang sudah disediakan seperti thin, medium, atau thick.
5px pada contoh sintak diatas sama dengan 5px 5px (atas/bawah dan kanan/kiri) atau 5px 5px 5px 5px (atas kanan bawah kiri).
Warna Garis atau Border Color
Dalam artikel CSS tentang Warna sudah dijelaskan bagaimana mengatur warna, namun dalam bagian ini kita akan membahas lebih dalam dan bagaimana menggunakan dengan benar yang dikombinasi dengan style dan width. Border color bisa sendiri membutuhkan properti border-style.
Contoh sintak:
<!DOCTYPE html>
<html>
<head>
<title>CSS Border</title>
<style>span.border { border-style: solid; border-width: 1px; border-color: red; }</style>
</head>
<body>
<h1>PojokCoding.co.id</h1>
<span class="border">Border dotted</span>
</body>
</html>
Contoh sintak:
Penting: Apabila ditemukan properti border-style tanpa mengatur border-color dan dalam deklarasi ditemukan properti color maka warna border akan mengikuti properti color
Penulisan singkat Garis atau Border Short
Penulisan border dapat dituliskan dengan hanya menuliskan properti border: 5px solid red atau dengan sintak urutan:
border-width
border-style
border-color