Как так сделать?Border

[Temik2704]

Как сделать такое?Создать div общий,задать ему нижний бордер,внутрь него залить еще один див с высотой оранжевого фона?

Это правильное решение или может быть лучше и как-то по другому?

 

[Catherine]

Если линии однородные, то можно, например, применить одновременно border + outline к одному из блоков, либо задать обоим блокам border'ы (одному верхний, другому нижний), или задать одну из линий с помощью абсолютно позиционированного псевдоэлемента. Еще можно применить box-shadow с нулевым размытием.

[Radiocity]

Можно воспользоваться :before, задав абсолютное позиционирование. Совместимость до ie8. Более раннюю совместимость обеспечат вложенные слои.

http://jsfiddle.net/FAg92/

 

Outline устанавливается со всех сторон, а box-shadow не работает в старых ослах.

Edited November 19, 2013 by Radiocity

[Nick-OK]

А не проще ли и правильнее просто фоновое изображение вместо лишних слоев и линий? Или я отстал от жизни?

[Radiocity]

Зачем, если можно обойтись без изображений?

[Catherine]

А не проще ли и правильнее просто фоновое изображение вместо лишних слоев и линий?

А чем это проще или правильнее? Зачем лишняя картинка, если можно реализовать при помощи css?

[SelenIT]

Для новых браузеров (IE9+ и все остальные последних пары лет) можно как-то так.

[Nick-OK]

Примеры убеждают. Я все еще оперирую старыми категориями