CODEWITHSUNDEEP
htmlcss
Skizit
Skizit

Reputation: 44842

Why doesn't <hr />'s colour change?

I've got the following...

 <hr style="color:#292929;background-color:#292929;"/>

but the colour isn't changing to the HTML colour code I've declared. Why not?

Upvotes: 19

Views: 34525

Answers (10)

Rohit Patel
Rohit Patel

Reputation: 49

**You can also try this horizontal line(rule) better with tag? **

svg{

margin:80px auto;
}

.path2 {
  stroke-dasharray: 1120;
/*   stroke-dashoffset: 800; */
  animation: draw1 1s linear alternate;
}

@keyframes draw1 {
  from {
    stroke-dashoffset: 1120;
  }
  to {
    stroke-dashoffset: 2240;
  }
}
<svg version="1.1" id="line_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="1200px" height="5px" xml:space="preserve">
  <path class="path2" fill="#01a09e" stroke-width="6" stroke="#01a09e" d="M0 0 l1120 0"/>
</svg>

Upvotes: 0

baz
baz

Reputation: 1587

hr {
    color: inherit;
    border: 0;
    border-top: 1px solid;
}

This is the bootstrap solution.

Upvotes: 0

den_ban
den_ban

Reputation: 79

just use a p tag with border, above unswers give no result for me...

<p style="border-bottom: 1px solid #D6D6D6; padding-bottom: 20px; margin-bottom: 20px"></p>

Upvotes: 6

Jason Wolfram
Jason Wolfram

Reputation: 1

Sagivo, Bless you and thank you. That did the trick after a good hour+ of messing with the problem. FYI to others I found that to get a similar look in both Outlook(the evil one) and other web clients including older IE I used this.

<hr size="2" width="80%" align="center" style="border-color:#878787; background:#878787">

Setting size to 1 made it too thick in some places, and 2 with out the background color too thin in others. This is what I ended up with. Hope it helps someone else.

Upvotes: 0

Sagiv Ofek
Sagiv Ofek

Reputation: 25270

instead of: color:#292929;

use: border-color:#292929;

Upvotes: 2

Gilly
Gilly

Reputation: 9692

  1. Try giving it a height like 5px;
  2. Give it your border styles but with 0px width.
  3. Re-apply a 1px width to either top or bottom:

Result:

<hr style="height: 5px; border: 0px solid #D6D6D6; border-top-width: 1px;" />

Upvotes: 3

Matt Nathanson
Matt Nathanson

Reputation: 191

try defining a height

Upvotes: 0

Dave Hogan
Dave Hogan

Reputation: 3221

Try styling the border instead

Upvotes: 1

ford
ford

Reputation: 1887

the hr tag is a bit tricky vs other elements to style. Which things work and which ones don't is very browser dependent.

A cache of tricks (including coloration) is available here: http://webdesign.about.com/od/beginningcss/a/style_hr_tag.htm

Upvotes: 6

user27414
user27414

Reputation:

Set border-color.

Upvotes: 38

Related Questions