CODEWITHSUNDEEP
cssfirefoxgoogle-chromeborder
Nick
Nick

Reputation: 8530

Larger border-bottom breaks border-left and border-right in Firefox and Chrome

When overriding the size of the border-bottom in a div that already has a 1px border, Firefox and Chrome render the border-left and border-right incorrectly:

HTML

<div></div>

CSS

div{
    width: 300px;
    height: 200px;
    border: 1px solid #9fd;
    border-bottom: 50px solid #333;
}

jsFiddle link: http://jsfiddle.net/azSrQ/

Expected result (Safari 6.0.1)

Safari 6.0.1

Actual result (Firefox 15.0.1 and Chrome 22)

Firefox and Chrome

The left and right border always stop halfway down the border-bottom in the latest Chrome and Firefox. I couldn't find any reports of this in Bugzilla or Chromium's issues page.

Is there a workaround?

Upvotes: 1

Views: 797

Answers (2)

Boris Zbarsky
Boris Zbarsky

Reputation: 35064

Per spec, this should give a sloped gradient from one border width to the other. But when one of the widths is only 1px, that generates to the thing you see above....

Upvotes: 1

Giona
Giona

Reputation: 21114

That's weird i guess. Or maybe it's the default behaviour? They stop exactly at 50% of the bottom border.

Anyway, here's a method to emulate it:

div:after {
    content:".";
    color:#333;
    position:absolute;
    bottom:-50px; left:-1px; right:-1px;
    line-height:25px;
    border-left:1px solid #9fd; border-right:1px solid #9fd;
}​

Demo

Tested and working on latest Chrome and Safari, little issue with FF (win)

Upvotes: 1

Related Questions