Memberi gaya pada garis pemisah

Garis Pemisah dalam HTML

Biasa ditulis dengan tag <hr /> yang berasal dari Horizontal Rule atau garis yang memisahkan bagian halaman secara horisontal.
Tampilan asli tag <hr/> tanpa gaya adalah seperti garis dibawah ini :

---

Garis tersebut apabila diberikan gaya atau style menggunakan CSS maka akan menampilkan garis pemisah yang berbeda dari tampilan aslinya dan bisa lebih bervariasi.

Dibawah ini beberapa CSS untuk mengubah tampilan tag <hr />.

HTML : <hr class="style1" />
CSS :
<style>

hr.style1{
border-top: 1px solid #8c8b8b;
}

</style>

style1

---

HTML : <hr class="style2" />
CSS :
<style>

hr.style2 {
border-top: 3px double #8c8b8b;
}

</style>

style2

---

HTML : <hr class="style3" />
CSS :
<style>

hr.style3 {
border-top: 1px dashed #8c8b8b;
}

</style>

style3

---

HTML : <hr class="style4" />
CSS :
<style>

hr.style4 {
border-top: 1px dotted #8c8b8b;
}

</style>

style4

---

HTML : <hr class="style5" />
CSS : <style>


hr.style5 {
background-color: #fff;
border-top: 2px dashed #8c8b8b;
}

</style>

style5

---

HTML : <hr class="style6" />
CSS :
<style>

hr.style6 {
background-color: #fff;
border-top: 2px dotted #8c8b8b;
}

</style>

style6

---

HTML : <hr class="style7" />
CSS : <style>


hr.style7 {
border-top: 1px solid #8c8b8b;
border-bottom: 1px solid #fff;
}

</style>

style7

---

HTML : <hr class="style8" />
CSS :
<style>

hr.style8 {
border-top: 1px solid #8c8b8b;
border-bottom: 1px solid #fff;
}
hr.style8:after {
content: '';
display: block;
margin-top: 2px;
border-top: 1px solid #8c8b8b;
border-bottom: 1px solid #fff;
}

</style>

style8

---

HTML : <hr class="style9" />
CSS :
<style>

hr.style9 {
border-top: 1px dashed #8c8b8b;
border-bottom: 1px dashed #fff;
}

</style>

style9

---

HTML : <hr class="style10" />
CSS :
<style>

hr.style10 {
border-top: 1px dotted #8c8b8b;
border-bottom: 1px dotted #fff;
}

</style>

style10

---

HTML : <hr class="style11" />
CSS :
<style>

hr.style11 {
height: 6px;
background: url(http://ibrahimjabbari.com/english/images/hr-11.png) repeat-x 0 0;
    border: 0;
}

</style>

style11

---

HTML :
 <hr class="style12" />
CSS :
<style>

hr.style12 {
height: 6px;
background: url(http://ibrahimjabbari.com/english/images/hr-12.png) repeat-x 0 0;
    border: 0;
}

</style>

style12

---

HTML : <hr class="style13" />
CSS :
<style>

hr.style13 {
height: 10px;
border: 0;
box-shadow: 0 10px 10px -10px #8c8b8b inset;
}

</style>

style13

---

HTML : <hr class="style14" />
CSS :
<style>

hr.style14 {
  border: 0;
  height: 1px;
  background-image: -webkit-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
  background-image: -moz-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
  background-image: -ms-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
  background-image: -o-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
}

</style>

style14

---

HTML : <hr class="style15" />
CSS :
<style>

hr.style15 {
border-top: 4px double #8c8b8b;
text-align: center;
}
hr.style15:after {
content: '\002665';
display: inline-block;
position: relative;
top: -15px;
padding: 0 10px;
background: #f0f0f0;
color: #8c8b8b;
font-size: 18px;
}

</style>

style15

---

HTML : <hr class="style16" />
CSS :
<style>

hr.style16 {
  border-top: 1px dashed #8c8b8b;
}
hr.style16:after {
  content: '\002702';
  display: inline-block;
  position: relative;
  top: -12px;
  left: 40px;
  padding: 0 3px;
  background: #f0f0f0;
  color: #8c8b8b;
  font-size: 18px;
}

</style>

style16

---

HTML : <hr class="style17" />
CSS :
<style>

hr.style17 {
border-top: 1px solid #8c8b8b;
text-align: center;
}
hr.style17:after {
content: '§';
display: inline-block;
position: relative;
top: -14px;
padding: 0 10px;
background: #f0f0f0;
color: #8c8b8b;
font-size: 18px;
-webkit-transform: rotate(60deg);
-moz-transform: rotate(60deg);
transform: rotate(60deg);
}

</style>

style17

---

HTML : <hr class="style18" />
CSS :
<style>

hr.style18 {
  height: 30px;
  border-style: solid;
  border-color: #8c8b8b;
  border-width: 1px 0 0 0;
  border-radius: 20px;
}
hr.style18:before {
  display: block;
  content: "";
  height: 30px;
  margin-top: -31px;
  border-style: solid;
  border-color: #8c8b8b;
  border-width: 0 0 1px 0;
  border-radius: 20px;
}

</style>

style18

---

Source