Рамка с указанием цвета уголков на css

[LonerD]

Вопрос возник при прохождении самого первого уровня на сайте http://divhack.com

Приведённое на сайте решение не даёт ответа на вопрос, оно не соответствует предложенному для вёрстки psd-макету.

Верстаю меню (или же подвал) в резину.

В макете вокруг блока навигации имеется довольно интересная однопиксельная рамка. Верхняя, правая, нижняя, левая границы - разных цветов. В каждом уголке рамки - однопиксельные клеточки, тоже разных цветов.

Блок я сверстал, бордеры указал:

.nav {width: 100%; height: 43px; background-color: #b6b6b6; border-top: 1px solid #d3d3d3; border-right: 1px solid #cfcfcf; border-bottom: 1px solid #e2e2e2; border-left: 1px solid #c2c2c2;}

Но как сделать однопиксельные уголки на css без картинок?

[LonerD]

Родилось такое решение - разделить весь блок на три:

HTML
	<div class="navbottom"></div>
	<div class="nav">
		навигация
	</div>
	<div class="navbottom"></div>

CSS
.navbottom {width: 100%; height: 1px; background-color: #d3d3d3; border-right: 1px solid #e3e2e3; border-left: 1px solid #dadada; font-size: 0;}
.nav {width: 100%; height: 41px; background-color: #b6b6b6; border-right: 1px solid #cfcfcf; border-left: 1px solid #c2c2c2;}
.navbottom {width: 100%; height: 1px; background-color: #e2e2e2; border-right: 1px solid #ececec; border-left: 1px solid #e7e7e7; font-size: 0;}

Возможно, есть более элегантное решение?

PS. Упс. Из-за бордера справа появляются два лишних пикселя. Как от них избавиться?

Edited April 27, 2012 by LonerD

[LonerD]

Спасибо всем за внимание и советы.

Решение с лишними пикселями bordera оказалось простым, но неочевидным "для начинающих".

Не нужно было указывать width: 100%;