CSS border jagged with different sized/color borders

Question

It seems that when you have an element with different sized/colored borders, you can see a very strange jagged line happening. I never noticed this before, but was looking at Vimeo's super hot new design when I noticed this (don't really want to say "glitch") weird occurrence.

So if you had a div hanging out, styled as in below, you'll notice a pixel stepping (almost like it's set to inset, rather than solid...)

div {
    height            : 25px;
    width             : 50px;
    background        : #eee;
    border-style      : solid;
    border-color      : green;
    border-left-color : black;
    border-width      : 3px 3px 3px 15px;
}

Anyone notice this/ know why it happens?

Answer 1

The reason this happens is because it's creating a 'frame' around the box.

Think of a wooden picture frame, you don't use four rectangular pieces of wood to create a frame, you use 4 trapezoidal pieces and put them together. When you set a larger width on one side, its diagonally rendering it inward towards the corner of the box.

The reason it looks bad is because the antialiasing between borders has never been good.

Alternative

You could just do div:before{border-left: 15px solid #000;} if you didn't want the borders cropped like that.

Answer 2

That's not a "glitch" - it's how borders work. They connect diagonally.

If you take it one step further and create a <div> with no height and width, but a large border you can see the result - http://jsfiddle.net/mFzrA/

BTW - this is the technique being used to create pure CSS triangles and speech bubbles. You just make 3 of the borders transparent and the 4th gives you a nice triangle.