Simple Styles for <hr>'s

codepen.io/jdelibas/pen/lycwE

---

CodePen - HR with centered text

---

---

Style 1

---

border: 0;
border-top: 1px solid rgba(0,0,0,.1);

Style 2

---

hr.style-2 {
    border: 0;
    height: 1px;
    background: #333;
    background-image: linear-gradient(to right, #ccc, #333, #ccc);
}

Style 3 - Double-color dashed line

---

hr.style-3 {
    border: 0;
    border-bottom: 1px dashed #ccc;
    background: #999;
}

Style 4 - Single-direction drop shadow

---

hr.style-4 {
    height: 12px;
    border: 0;
    box-shadow: inset 0 12px 12px -12px rgba(0, 0, 0, 0.5);
}

Style 5 - Cloud

---

hr.style-5 {
    border: 0;
    height: 0; /* Firefox... */
    box-shadow: 0 0 10px 1px black;
}
hr.style-5:after {  /* Not really supposed to work, but does */
    content: "\00a0";  /* Prevent margin collapse */
}

Style 6

---

hr.style-6 {
    border: 0;
    height: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

Style 7 - Flaired edges, by Tomas Theunissen

---

hr.style-7 {
    overflow: visible; /* For IE */
    height: 30px;
    border-style: solid;
    border-color: black;
    border-width: 1px 0 0 0;
    border-radius: 20px;
}
hr.style-7:before { /* Not really supposed to work, but does */
    display: block;
    content: "";
    height: 30px;
    margin-top: -31px;
    border-style: solid;
    border-color: black;
    border-width: 0 0 1px 0;
    border-radius: 20px;
}

Style 8 - Glyph, by Harry Roberts

---

hr.style-8 {
    overflow: visible; /* For IE */
    padding: 0;
    border: none;
    border-top: medium double #333;
    color: #333;
    text-align: center;
}
hr.style-8:after {
    content: "§";
    display: inline-block;
    position: relative;
    top: -0.7em;
    font-size: 1.5em;
    padding: 0 0.25em;
    background: white;
}

.style-9 {
    border: none;
    width: 60%;
    margin: auto;
    margin-top: 7%;
    height: 30px;
    background: linear-gradient(135deg, #E5E5E5 20%, transparent 25%) -20px 0,
    linear-gradient(225deg, #E5E5E5 25%, transparent 20%) -20px 0,
    linear-gradient(315deg, #E5E5E5 25%, transparent 20%),
    linear-gradient(45deg, #E5E5E5 25%, transparent 20%);
    background-size: 30px 30px;
    background-color: #1A85FD;
}

Style 9 - Zigzag line

---

.style-9 { border: none; width: 60%; margin: auto; margin-top: 7%; height: 30px; background: linear-gradient(135deg, #E5E5E5 20%, transparent 25%) -20px 0, linear-gradient(225deg, #E5E5E5 25%, transparent 20%) -20px 0, linear-gradient(315deg, #E5E5E5 25%, transparent 20%), linear-gradient(45deg, #E5E5E5 25%, transparent 20%); background-size: 30px 30px; background-color: #1A85FD; }

Style 10

---

Style 11

---

Style 12

---

Style 13

---

Style 14

---

Perpendicular Line

---

.perpendicular-line {
  width: 50%;
  margin: auto;
  margin-top: 10%;
  margin-bottom: 0;
  transform: rotate(90deg);
  border-color: #1A85FD;
}