CSS Quick Tip Tuesday: Styling the hr tag
Super speedy quick tip of the day is something that I do on every website I work with and that is styling that ugly HR tag to something that is clean and much prettier than the browser defaults.
Down and dirty here is the code:
hr {
border: 0;
color: #E3E3E3;
background-color: #E3E3E3;
height: 1px;
width: 100%;
text-align: left;
}
This is cross browser and yes you need all the definitions. One is to reset IE and the other is for the rest of the browsers (Firefox, Chrome, Opera, Safari). I believe the background color definition is for IE and the color is for the rest. Feel free to correct me if I am wrong.
Have fun. This one is super handy so keep it in an easy to find place!
Tags: chrome, css, firefox, horizontal rule, hr, ie, opera, safari, tag