Strange behavior with borders on Firefox 10 on windows

Question

I'm trying to create arrows using borders but FF10 on win7 doesn't want to play ball.

It adds a 1px border around my border.

Here is a JSFiddle with a minimal example: http://jsfiddle.net/5jjVb/1/

It doesn't matter what color the border I set has, the extra border is always the same color.

For those of you not on FF or on window 7 here is a screenshot:

They put a border around my border so I can have an arrow in my arrow

And here is the same arrow in FF on OS X:

No extra border

I could always change the color of the arrow to the same color as the extra border but that doesn't feel right.

score 2 · Accepted Answer · edited Feb 22 '12 at 14:01

2

And here is workout to tackle this issue. http://jsfiddle.net/5jjVb/3/

edited Feb 22 '12 at 14:01

BoltClock

answered Feb 22 '12 at 11:20

Shawn Taylor

Awesome! But this gives me another problem, the border is antialiased. Know any way of disabling this? – Nicklas A. Feb 22 '12 at 12:26
Yeah, the border is antialiased but only on FF on windows – Nicklas A. Feb 22 '12 at 13:26

score 0 · Answer 2 · answered Feb 22 '12 at 11:11

0

Try this:

div {
    border: 30px solid transparent;
    border-left-color: #EEE;
    -moz-border-left-colors: none;
}

answered Feb 22 '12 at 11:11

Stelian Matei

score 0 · Answer 3 · edited May 23 '17 at 11:48

0

Give rgba() instead of transparent for transparency.For more check my this answer

edited May 23 '17 at 11:48

Community

answered Feb 22 '12 at 11:20

sandeep

Awesome! But this gives me another problem, the border is antialiased. Know any way of disabling this? – Nicklas A. Feb 22 '12 at 12:25

3 Answers3