CSS Border

Mengatur garis batas elemen (border)

Border = garis batas terluar dari suatu elemen.

Property border

border-width, border-style, border-color

<p class="dotted">Elemen dengan border dotted.</p>
<p class="dashed">Elemen dengan border dashed.</p>
<p class="solid">Elemen dengan border solid.</p>
<p class="double">Elemen dengan border double.</p>
<p class="groove">Elemen dengan border groove.</p>
<p class="ridge">Elemen dengan border ridge.</p>
<p class="inset">Elemen dengan border inset.</p>
<p class="outset">Elemen dengan border outset.</p>

<style>
p {
  border-width: 6px;
  border-color: #ccc;
}
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;}
</style>

Elemen dengan border dotted.

Elemen dengan border dashed.

Elemen dengan border solid.

Elemen dengan border double.

Elemen dengan border groove.

Elemen dengan border ridge.

Elemen dengan border inset.

Elemen dengan border outset.

border-width = ketebalan border.

Menentukan sisi border.

Border pada elemen dapat ditentukan pada sisi tertentu saja, misal:
border sisi atas saja atau sisi bawah saja dst.

Properti yang digunakan untuk menentukan sisi border :

1. border-top border sisi atas.
2. border-left border sisi kiri.
3. border-right border sisi kanan.
4. border-bottom border sisi bawah.

<style>
div {
   border-top: 4px solid blue;
   border-bottom: 4px dotted green;
}
div {
   border-left: 4px groove blue;
   border-right:4px groove red;
}
</style>

Cara penggunaannya sama dengan properti sebelumnya, hanya menambahkan penyebutan sisi border saja.

Meringkas Properti border

<style>
div {border: 2px solid blue;}
div {border: 2px dotted blue;}
div {border: 2px groove blue;}
</style>

Urutan penulisan nilai properti border untuk meringkas :
border {nilai border-width + nilai border-style + nilai border-color }