Cara Membuat Horizontal Line Pada Sebuah Website

Reviewed by Sutiono S.Kom., M.Kom., M.T.I

by Hanifah Nurbaeti February 17, 2021

Di bawah ini kita akan mempelajari cara mengatur gaya elemen hr(horizontal line) dengan CSS.

Horizontal Line(HR)

<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<head>
<style>
/* Border Biru */
hr.new1 {
  border-top: 1px solid blue;
}

/* Border biru putus-putus */
hr.new2 {
  border-top: 1px dashed blue;
}

/* Border biru dotted */
hr.new3 {
  border-top: 1px dotted blue;
}

/* Border biru pekat */
hr.new4 {
  border: 1px solid blue;
}

/* Border hijau bulat besar */
hr.new5 {
  border: 10px solid green;
  border-radius: 5px;
}
</style>
</head>
<body>

<h2>Style HR(Horizontal Line)</h2>
<p>Default:</p>
<hr>
<p>Perbedaan style pada tiap HR(Horizontal Line):</p>
<hr class="new1">
<hr class="new2">
<hr class="new3">
<hr class="new4">
<hr class="new5">

</body>
</html>

Cara Menata HR

Kita dapat menggunakan properti border untuk mengatur gaya elemen hr:

Contoh

/* Border Biru */
hr.new1 {
  border-top: 1px solid blue;
}

/* Border biru putus-putus */
hr.new2 {
  border-top: 1px dashed blue;
}

/* Border biru dotted */
hr.new3 {
  border-top: 1px dotted blue;
}

/* Border biru pekat */
hr.new4 {
  border: 1px solid blue;
}

/* Border hijau bulat besar */
hr.new5 {
  border: 10px solid green;
  border-radius: 5px;
}