How to use styling HR tags with simple CSS codes

The HR tag defines a thematic break in an HTML page,it is also used to separate content (or define a change) in an HTML page.However, the tag may still be displayed as a horizontal rule in visual browsers, but is now defined in semantic terms, rather than presentational terms.In HTML5 it is used as a thematic break,where as in HTML4.01 it is used as horizontal rule.But today we are going to show you how to  customize this horizintal line(HR tags) using simple CSS code to make it more stylish and professional.

Customizing HR tags using simple CSS codes

Process:
1.Go to Blogger >>Design
2.Search for ]]></b:skin>

3.Paste the following code just above or before ]]></b:skin>

STYLE 1.

---

hr#pbthr1{
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);
}

4. Now paste <hr id="pbthr1"/> where you want to use this styling horizontal line .

you can also use those other codes given below,just by changing  hr id.<hr id="xxxx"/>

STYLE 2.

---

hr#pbthr2 {
border: 0;
height: 1px;
background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
background-image: -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
background-image: -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
background-image: -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
}

STYLE 3.

---

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

STYLE 4.

---

hr#pbthr4{
height: 12px;
border: 0;
box-shadow: inset 0 12px 12px -12px rgba(0,0,0,0.5);
}

STYLE 5.

---

hr#pbthr5 {
border: 0;
height: 0; /* Firefox... */
box-shadow: 0 0 10px 1px black;
}

STYLE 6.

---

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