Grow your CSS skills. Land your dream job.

Image Shadow and Border Without Second Div?

  • # April 24, 2013 at 12:56 pm

    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.

    # April 24, 2013 at 1:08 pm

    > 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 “”).

    # April 24, 2013 at 1:30 pm

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

    I’m having a tough time visualising this.

    # April 24, 2013 at 1:43 pm

    Paule, you would have a box shadow around the image and a border around the image. The box shadow would be displayed on top of the border rather than outside of it.

    # April 24, 2013 at 1:47 pm

    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?

    # April 24, 2013 at 1:49 pm

    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.

    # April 24, 2013 at 2:04 pm

    How about a complex background-image gradient?

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

    # April 24, 2013 at 2:10 pm

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

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

    # April 24, 2013 at 4:07 pm

    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.

    # April 24, 2013 at 6:16 pm

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

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

    # April 24, 2013 at 6:20 pm

    good one Croco

    # April 25, 2013 at 10:57 am

    Very nice, @CrocoDillon

    # April 25, 2013 at 2:58 pm

    Thanks everybody, there’s a lot of great solutions here – I’m using @CrocoDillon ‘s.

    A definite issue with CSS is that some things aren’t well-documented and it takes creative thinking to get the desired results. Very well done.

    # April 25, 2013 at 3:26 pm

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

    # April 25, 2013 at 5:16 pm

    Props to Croc, nice simple solution.

Viewing 15 posts - 1 through 15 (of 15 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".