Image Shadow and Border Without Second Div?

[siouxfan45]

What I’d like to achieve is fairly simplistic. I’d like to have an image with a 15px border and a shadow around the image. However, I’d like that shadow to be around the image itself, not outside the border.

Is this possible without an additional DIV wrapping around the image? I feel like this is a “Let me Google that for you…” question, but I’ve been unable to find an answer in searches.

[ChrisP]

> Is this possible without an additional DIV wrapping around the image?

No, it’s not possible (for now). At least, as far as I know, maybe someone has something creative up their sleeve. But I’d say your best bet without extra markup would be a pseudo-element, which isn’t (currently) supported for the `img` tag. See [this spec](http://www.w3.org/TR/CSS2/generate.html#before-after-content “”).

[Paulie_D]

What would be the purpose/effect of the shadow? Is this a box-shadow/drop-shadow?

I’m having a tough time visualising this.

[Paulie_D]

Yeah…I get what you are trying to do…but I’m having trouble visualising how this would actually look.

Do you have something (mock-up image perhaps) we could look at?

[Merri]

http://codepen.io/Merri/pen/GLwes

Can’t do it with only the image element as you can’t have pseudo elements for it.

**Edit!**

But this you can do:

img {
background: red;
border-radius: 3em;
box-shadow: inset 0 0 1em black;
padding: 1em;
}

It might not be what you want, but it works.

[Paulie_D]

How about a complex background-image gradient?

http://codepen.io/Paulie-D/pen/kJlop

[KarimCossutti]

merris solution in action…
http://codepen.io/karimcossutti/pen/eFgBx

for what i understand this is what you want to achieve right?

[wolfcry911]

http://codepen.io/wolfcry911/pen/EFbjL

as merri pointed out, you can’t use pseudo elements :before or :after on img, but you could accomplish this using a background image on a different element.

[CrocoDillon]

It is possible if you think of the border as another box-shadow ;)

http://codepen.io/CrocoDillon/pen/DjczI

[wolfcry911]

good one Croco

[ChrisP]

Very nice, @CrocoDillon

[CrocoDillon]

Thnx ^^ @siouxfan45, yeah agree on the not well documented part (JS is even worse…) Good luck!

[Podders]

Props to Croc, nice simple solution.

[Author]

Posts