Question

When a box-shadow is applied to an element the corners are less “thick” than the middle because they don’t have shadow on both sides. This creates an odd effect on full width elements.

http://jsfiddle.net/kevincox/6FhYe/18/

If you look at that example you will see that the edges are lighter. If the “banner” is at the top of a page you can spread it and shift it up but that doesn’t work for the middle of the page as you can see the top.

I was wondering if anyone had a solution with no images and preferably cross-browser but I can deal with vendor prefixes for a bit. Is there something like a separate horizontal and vertical stretch?

Answer 1

One trick that seems to work is setting negative horizontal margins on the element, so that its ends extend outside the page, and adjusting the padding to compensate. Using your jsFiddle as an example, try changing the CSS to:

h1 {
    margin: 20px -20px;
    padding: 10px 30px;
    background-color: #AFA;
    box-shadow: 0 0 10px black;
}