CODEWITHSUNDEEP
cssfirefox
Himmators
Himmators

Reputation: 15006

Firefox includes border in height of <hr> whilst chrome does not

I'm trying to style a border so that it consist of a

1px green line below a 1px white line 

hr{
    height: 1px;
    border: 0;
    background-color: #89a889;
    border-bottom: 1px solid #fafafa;
}

this works in webkit, but firefox seems to include the border in the total height of the line. This makes the bottom border cover the green line. Whan can I do about this?

Upvotes: 3

Views: 1399

Answers (2)

Boris Zbarsky
Boris Zbarsky

Reputation: 35064

You can set -moz-box-sizing: content-box; box-sizing: content-box;. The UA stylesheet sets it to border-box sizing.

Upvotes: 1

bookcasey
bookcasey

Reputation: 40433

hr {
    height: 0;
    border: 0;
    border-top: 1px solid #89a889;
    border-bottom: 1px solid #fafafa;
}

Use two borders.

Demo

Alternatively, if you really want it to work with a background color, use box-sizing: content-box to get Firefox to display an hr with the normal CSS box model.

You may want to include other vendor prefixes.

hr {
    height: 1px;
    border: 0;
    background-color: red;
    border-bottom: 1px solid blue;
    -moz-box-sizing: content-box;
}

Demo

Upvotes: 2

Related Questions