http://chrispaul.ws/hr-style/

<head>
    <style type="text/css">
        hr {
            background: url('http://imgur.com/X93vn.png') repeat-x left top;
            border: 0 none;
            margin: 0;
        }
    </style>
</head>

<body>

    <hr>

</body>
  • So in firefox, the dashed bg image appears but in other browsers, it does not. The hr is basically invisible in safari. Chris Paul over 6 years ago

6 answers

danwellman 5600
1
point

I would use a different element to acheive this effect to be honest. I haven't used a <hr> in years...

Answered over 6 years ago by danwellman
  • ok, what would you recommend I do instead? Thanks Chris Paul over 6 years ago
  • I agree with Dan. The specifics will vary depending on your use case. Can you provide further info about what you're trying to achieve? Joshua Clanton over 6 years ago
  • Ditto for Dan and Joshua. If you just want a dashed line, you may not need an additional element at all. You can add border-bottom to the element above or a background image with "repeat-x left bottom". Doug over 6 years ago
Carter 0
0
points

I figured it out, you can use the background-color: to fill it in, but if you want it all filled in you use the background and border-color: or you can just use the border if you want.

Answered almost 6 years ago by Carter
0
points

Have you tried giving it an explicit height?

Answered over 6 years ago by Nathan Duran
  • Ah. That seems to work with safari. Should have tried that. However, doesn't work with IE8 or IE7. Chris Paul over 6 years ago
0
points

You might try to add a div around the hr and style it. There is a working example of a background image at http://www.sovavsiti.cz/css/hr.html and I've seen it work in IE8.

Answered over 6 years ago by Steven Paligo
ifkas 0
0
points

Hi, or just add some small padding-bottom to the hr

Answered about 5 years ago by ifkas
0
points

I tend to use a div wrapped round an hr element - keeping the hr for semantics and when CSS is off, but styling the div for visual effect.

e.g.

<head>
    <style type="text/css">
        .divider {
            background: url('http://imgur.com/X93vn.png') repeat-x left top;
            border: none;
            margin: 0;
            height: 1px;
        }

        .divider hr{
            display: none;
        }

    </style>
</head>

<body>

    <div class="divider">
        <hr />
    </div>

</body>
Answered over 6 years ago by Tony Crockford