Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Box-shadow over border

Box-shadow over border


I have this problem where I want to have a Border and a box-shadow, but the shadow must be over the border.

The box-shadow property starts when the border ends, is it possible to move it over the border?

    border: solid rgba(128,42,42,.98) 16px;

    -moz-box-shadow: 0px 0px 20px #000000;
    -webkit-box-shadow: 0px 0px 20px #000000;
    box-shadow: 0px 0px 20px #000000;


Already tried inset in my box shadow, but it didn't work!

I'm looking for this effect:


And I'm getting this result:

shadow in border

Problem courtesy of: Mandi


I think this would be much more easily achieved with two overlayed box shadows

Something like this approaches what you're looking for

box-shadow: 0 0 20px 5px #000000,
    0 0 0 16px rgba(128,42,42,.98);
Solution courtesy of: Zach Saucier


View additional discussion.

This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

Box-shadow over border


Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription