Skip to content
July 16, 2012 / Danii Oliver

Styling <hr> Elements with a Custom Color

<hr>s can be styled with color:#f00 and background-color:#f00 for some browsers. However in others you will still end up with a black line in the middle. To avoid this glitch, keep the content divider and have the <hr> be the color you want use the following hack.

Wrap the <hr> in a div with a class=”hrFix” then apply the following css.

div.hrFix {
height: 1px;
background: #7eb889;
div.hrFix hr {
display: none;


Leave a Reply

Please log in using one of these methods to post your comment: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: