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

Box-shadow over border

Box-shadow over border

Problem

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
{       
    border: solid rgba(128,42,42,.98) 16px;
}


.img-box-shadow
{
    -moz-box-shadow: 0px 0px 20px #000000;
    -webkit-box-shadow: 0px 0px 20px #000000;
    box-shadow: 0px 0px 20px #000000;
}

My HTML:

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

I'm looking for this effect:

border

And I'm getting this result:

shadow in border

Problem courtesy of: Mandi

Solution

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

Discussion

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

×