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?
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.