Style hr tag with CSS

The HTML <hr> tag represents a Horizontal-rule and its miles used for web page smash thru line. It creates a horizontal line, which makes a person recognize that there's a quit of the web page or a sentence smash.
We also can layout the hr (horizontal-rule) tag to create an appealing user interface.

Following are the 2 CSS style for reference

Style 1:

---

hr.style-1 { border: 0; height: 1px; background: #333; background-image: -webkit-linear-gradient(left, #ccc, #333, #ccc); background-image: -moz-linear-gradient(left, #ccc, #333, #ccc); background-image: -ms-linear-gradient(left, #ccc, #333, #ccc); background-image: -o-linear-gradient(left, #ccc, #333, #ccc); }

Style 2:

---

hr.style-2 { 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 3:

---

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