Css border bug - oblique rendering

Question

We have the following code: http://jsfiddle.net/Z92Qp/

As you can see the green line that appear on mouse hover is "oblique" on the right side. see the image

Is that a bug of the browsers?

Thanks in advance

It's not a bug, [that's just how borders are drawn](http://stackoverflow.com/questions/7073484/how-does-this-css-triangle-shape-work). — thirtydot, Aug 08 '12 at 09:44
Think of it as a picture frame - easiest way to join the corners is at 45 degree angles. — chrisfrancis27, Aug 08 '12 at 09:45

score 2 · Answer 1 · answered Aug 08 '12 at 09:45

2

No, borders are designed that way, to meet half way as seen here

answered Aug 08 '12 at 09:45

CalabiYau

471
2
9

score 2 · Accepted Answer · answered Aug 08 '12 at 09:48

2

This is not a bug its how the browsers choose to render the border.

See this example I mocked up. http://jsfiddle.net/blowsie/Uss7X/

enter image description here

answered Aug 08 '12 at 09:48

Blowsie

40,239
15
88
108

score 1 · Answer 3 · answered Aug 08 '12 at 09:45

1

Hey now used to box shadow as like this

li:hover {
                box-shadow: 0 4px 0 0 #00FF00;
    -webkit-box-shadow: 0 4px 0 0 #00FF00;
    -moz-box-shadow: 0 4px 0 0 #00FF00;

            }

Live demo

answered Aug 08 '12 at 09:45

Rohit Azad Malik

31,410
17
69
97

score 0 · Answer 4 · answered Aug 08 '12 at 09:44

CSS borders are drawn with diagonal corners.

Otherwise, if you had 2 different colours for bottom and right (blue & red for e.g), what would happen in the corner? Would it be all red, or all blue?

This is well known, and is even exploited to make CSS Triangles

Css border bug - oblique rendering

4 Answers4