Граница CSS неровная с границами разного размера/цвета

Кажется, что когда у вас есть элемент с границами разного размера/цвета, вы можете увидеть очень странную зубчатую линию. Я никогда не замечал этого раньше, но смотрел на супер крутой новый дизайн Vimeo, когда заметил это (на самом деле не хочу говорить «глюк») странное явление.

Таким образом, если у вас есть выступающий элемент div, оформленный, как показано ниже, вы заметите шаг пикселя (почти как вставка, а не заполнение...)

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

Кто-нибудь замечает это/знает, почему это происходит ?