Как изменить стыковку сторон border?

Question

[Сергей Науменко]

Столкнулся с проблемой, когда каждая сторона border имеет свой цвет и стыковка этих сторон происходит вот таким образом.


Как сделать, что бы стыковка была ровной? К примеру border-left идет до самого низа или border-bottom во всю ширину.
Мне не нравится вот это наискось.

Answer 1

[A K]

Для таких целей используйте псевдоэлементы ::after ::before

Comments

[Сергей Науменко]

Хм... Если я не ошибаюсь, то раньше такого не было.
Кстати, есть ещё один вариант. Можно в принципе использовать box-shadow.

[A K]

Сергей Науменко: jsfiddle.net/Symphony/zLcqnrvw/1

[A K]

Сергей Науменко: псевдоэлементами больше универсальности

Answer 2

[Денис Инешин]

Можно еще вот так:
jsfiddle.net/IonDen/zLcqnrvw

Answer 3

[Андрей Б.]

border-top: 10px inset red;
border-left: 10px inset blue;
border-right: 10px inset yellow;
border-bottom: 10px inset green;

jsfiddle.net/3uk32enw
htmlbook.ru/css/border-style