<hr> - always a fixed size?

Using CSS to change the size and look

[Hester]

I'm trying to style an <hr> tag using this code:

hr {padding:20px 0 0 0;
border:1px dashed #f00;
background-color:transparent;
border-bottom:1px dashed #000;}

I want the top transparent but for testing I am using a red colour. The bottom should be a black dashed line. The gaps should be transparent so a background image can show through.

What I've found is that if you increase the border size above 1px, the hr never gets any bigger. Mozilla also seems to have a bug where the hr disappears except for the sides!

Can hr not be made any larger?

How about smaller so only one thin line appears - how is that possible?

I've tried various code combinations but nothing seems to have any effect.

Also I can't get IE6 to use a transparent colour for the top border - it comes out white.

[ukgimp]

hr {
height:1px;
width:80%;
background:#000000;
color: #000000
}

you could try making the attribute 110% and see what that does. This makes it 80% for me.

Give it a go.

[Hester]

Of course! Why didn't I think of height. Though I still don't see why a border can't be applied of any size...

Hmmm.... now I need to add

border:none;

to suit Mozilla. But when I increase the pixel height to 2px, it gives an extra pixel of height in that browser! :-(

Next I need to change

color

to

background-color

as I just read in Bugzilla that Mozilla takes it's HR colour from the background. Otherwise the colour is always black.

Now I'm getting a grooved border effect in IE6 when it should be solid. IE is also putting the border outside the background, yet Mozilla and Opera draw it inside. But at least I can make the border any size I want now!

Here's my code:

hr {
height:100px;
width:100%;
background-color: #ff0;
border:10px dashed red;
}

Gotta love browser differences! :-)