CSS Border on PNG image with transparent parts

Question

Im trying to add a border on a PNG image I have (Example included). The thing is that when I add the border currently it adds it on a box shape around all the image and not on the exact vector (Meaning it includes the transparent parts in the image).

Is there any possible way to setup the configuration of the border that it won't consider the transparent areas. (Even if not in CSS... Maybe HTML5/JS?)

Example image

Example image with border

Even though the image is a transparent png, the border is applied to the element, which is still essentially a square around the image. There isn't a solution sadly, why can't you make the border on the actul image? — Andy, Oct 02 '12 at 12:43
Can you illustrate what you want the image + border to look like? — Jon Egerton, Oct 02 '12 at 12:43
Hi Jon, I added the image of an example how I'd like it to show. — nimi, Oct 02 '12 at 12:47
You could try playing with Raphael. raphaeljs.com. Or loading your image into a HTML5 canvas and doing your border with an edge-detection script (eek!). — Lee Kowalkowski, Oct 02 '12 at 13:49
There you are then - you've got a nice green border! ;-). Seriously though - you're not going to achieve this without drawing the border on the image yourself. — Jon Egerton, Oct 02 '12 at 13:50

score 97 · Answer 1 · edited Feb 01 '15 at 14:03

As of now (January 31st 2015) there is a way to do that without using canvas, with pure CSS, and with only 2 lines of code.

The trick is using the css filter and -webkit-filter properties to draw two drop shadows with no blur, one for the positive axis and one for the negative, which will wrap around the image, which will provide the (hopefully) desired effect.

Note: css filters are not at all supported in IE (let's hope Spartan does better), here is a compatibility table.

This first snippet (fiddle) will apply the simplest border possible.

img {
  -webkit-filter: drop-shadow(1px 1px 0 black)
                  drop-shadow(-1px -1px 0 black);
  filter: drop-shadow(1px 1px 0 black) 
          drop-shadow(-1px -1px 0 black);
}

body {
  background-color: lightcoral;
}

<img src="https://i.stack.imgur.com/Ju44K.jpg" width="250">

As you can see, some images (like this awesome baymax render) need a little more tweaking, you can see the right border is a little smaller than the left.

With that in mind, here is the perfected border snippet (fiddle) with just a really tiny value tweak.

img {
  -webkit-filter: drop-shadow(2px 1px 0 black)
                  drop-shadow(-1px -1px 0 black);
  filter: drop-shadow(2px 1px 0 black) 
          drop-shadow(-1px -1px 0 black);
}

body {
  background-color: khaki;
}

<img src="https://i.stack.imgur.com/Ju44K.jpg" width="250">

That should cover borders pretty well, but we can still have more fun with this, look at this awesome lightness effect snippet (fiddle).

img{
    -webkit-filter: drop-shadow(1px 1px 0 black) 
                    drop-shadow(-1px -1px 0 white);
    filter:drop-shadow(1px 1px 0 black) 
           drop-shadow(-1px -1px 0 white);
}

body{
    background-color:lightblue;
}

<img src="https://i.stack.imgur.com/Ju44K.jpg" width="250">

Hope this helps anyone wondering about the possibility of a wrap-around border for semitransparent images!

Let's hope this solution makes it into the specs and that IE starts supporting it! +1 — web-tiki, Feb 01 '15 at 13:59
good idea, just a tip, the effect works out a bit better using 4 drop shadows if your going for a bigger stroke: filter: drop-shadow(2px 0px 0 black) drop-shadow(0px 2px 0 black) drop-shadow(-2px -0px 0 black) drop-shadow(-0px -2px 0 black); — Adam Coulombe, Mar 22 '16 at 13:55
@AdamCoulombe `filter: drop-shadow(2px 0px 0 black) drop-shadow(0px 2px 0 black) drop-shadow(-2px -0px 0 black) drop-shadow(-0px -2px 0 black);`. Please use code next time :) — bb216b3acfd8f72cbc8f899d4d6963, Sep 15 '16 at 22:07
Thanks. I also found adding a small .5px radius helps smooth out the corners — Pyrolistical, Jul 11 '22 at 07:49
Is there a way to make the drop-shadow display above the image? I'm wanting to use it to hide some messy edges. I realise I could just edit the images manually, but I want to keep the messy edges elsewhere and I don't like having redundant copies of images with slight changes if I can make them using CSS — hopperelec, Jan 04 '23 at 08:55

score 39 · Answer 2 · edited Jan 26 '19 at 14:08

39

I extended the top answer a bit which is better for my use.

-webkit-filter: drop-shadow(2px 2px 0 white)
                drop-shadow(-2px 2px 0 white)
                drop-shadow(2px -2px 0 white)
                drop-shadow(-2px -2px 0 white);

filter: drop-shadow(2px 2px 0 white)
        drop-shadow(-2px 2px 0 white)
        drop-shadow(2px -2px 0 white)
        drop-shadow(-2px -2px 0 white);

If someone still needs it.

edited Jan 26 '19 at 14:08

byxor

5,930
4
27
44

answered Jul 25 '16 at 18:51

Simon Nitzsche

723
6
13

1

Yes, this is exactly what I need. Thank you for sharing. – ITWitch Jan 02 '17 at 06:08
1

Keep in mind this is bigger than 2 pixels each way, since you're going diagonal. Doing (1, 0), (-1, 0), (0, 1), (0, -1) results in a 1-pixel stroke. – Bryan K Mar 22 '17 at 18:24

score 12 · Answer 3 · answered Dec 24 '21 at 06:44

12

I implemented this technique with some tweaks and here are the results:

As you can see the circular images look good, so are the other shaped icons.

Here's my css, I added four rules for four sides, each with 5 pixels.

filter: drop-shadow(5px 0 0 white) 
        drop-shadow(0 5px 0 white)
        drop-shadow(-5px 0 0 white) 
        drop-shadow(0 -5px 0 white);

The prefixes are gonna added automatically since I am using scss.

answered Dec 24 '21 at 06:44

Tamal Anwar Chowdhury

392
3
8

Perfect! Loved it – uiroshan Nov 22 '22 at 08:38
With a bit of tweaking, gets really good. Thanks! – Tiago Rangel Mar 18 '23 at 09:12

MSC · Answer 4 · 2019-03-05T23:34:29.093

Three years on the question is still valid. As I (originally) wanted a thicker stroke, I ended up using 8 drop shadows (one for each point of the compass) to get it looking just so.

Strangely, using 8 shadows with an x- and y- offset of 1px yields an outline which looks about 5px wide, but introducing transparency into the colour seems to help dial this back to a slightly soft but quite attractive result:

img {
    --stroke-pos: 1px;
    --stroke-neg: -1px;
    --stroke-color: rgba(0, 255, 0, 0.2);
    filter: drop-shadow(var(--stroke-pos) 0 0 var(--stroke-color)) 
      drop-shadow(var(--stroke-neg) 0 var(--stroke-color))
      drop-shadow(0 var(--stroke-pos) 0 var(--stroke-color))
      drop-shadow(0 var(--stroke-neg) 0 var(--stroke-color))
      drop-shadow(var(--stroke-pos) var(--stroke-pos) 0 var(--stroke-color)) 
      drop-shadow(var(--stroke-pos) var(--stroke-neg) 0 var(--stroke-color))
      drop-shadow(var(--stroke-neg) var(--stroke-pos) 0 var(--stroke-color))
      drop-shadow(var(--stroke-neg) var(--stroke-neg) 0 var(--stroke-color));   
}

As you can see, CSS variables come in handy here (or Sass / Less).

score 0 · Answer 5 · answered Aug 29 '22 at 04:19

This blog explains how to create a smooth outline. You can update the calculateStrokeTextCSS function to use this string.

css += "drop-shadow(calc($stroke-width-img * " +
  cos +
  ") calc($stroke-width-img * " +
  sin +
  ") 0 $stroke-color-img)"

https://codepen.io/inegoita/pen/ZEQVPLx?editors=1010

score -2 · Answer 6 · answered Feb 18 '14 at 05:20

Came across needing to do this myself - came up with this hack. A series of overlaid images behind my original that were slightly out of step with each other. Context ctx3 is a copy of the original image and this would replicate a white silhouette behind the original several times.

      ctx3.shadowColor = "rgba(255,255,255,1)";
      ctx3.globalCompositeOperation = 'source-over';
      ctx3.shadowOffsetX = 2;
      ctx3.shadowOffsetY = 2;
      ctx3.shadowBlur = 0;
      ctx3.drawImage(YourImageSource,0,0);
      ctx3.shadowOffsetX = -2;
      ctx3.shadowOffsetY = -2;
      ctx3.shadowBlur = 0;
      ctx3.drawImage(YourImageSource,0,0);
      ctx3.shadowOffsetX = -2;
      ctx3.shadowOffsetY = 2;
      ctx3.shadowBlur = 0;
      ctx3.drawImage(YourImageSource,0,0);
      ctx3.shadowOffsetX = 2;
      ctx3.shadowOffsetY = -2;
      ctx3.shadowBlur = 0;
      ctx3.drawImage(YourImageSource,0,0);
      ctx3.shadowOffsetX = 0;
      ctx3.shadowOffsetY = 2;
      ctx3.shadowBlur = 0;
      ctx3.drawImage(YourImageSource,0,0);
      ctx3.shadowOffsetX = 0;
      ctx3.shadowOffsetY = -2;
      ctx3.shadowBlur = 0;
      ctx3.drawImage(YourImageSource,0,0);
      ctx3.shadowOffsetX = 2;
      ctx3.shadowOffsetY = 0;
      ctx3.shadowBlur = 0;
      ctx3.drawImage(YourImageSource,0,0);
      ctx3.shadowOffsetX = -2;
      ctx3.shadowOffsetY = 0;
      ctx3.shadowBlur = 0;
      ctx3.drawImage(YourImageSource,0,0);

CSS Border on PNG image with transparent parts

6 Answers6

Linked

Related