How To

Cara Membuat Horizontal Line Pada Sebuah Website

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;
}

Hanifah Nurbaeti

Share
Tags: CSSHow To