CSS Border on PNG image with transparent parts

0 votes

I'm attempting to apply a border to a PNG image I've created (Example included). The problem is that when I apply the border, it creates a box shape around the entire image rather than a precise vector (Meaning it includes the transparent parts in the image).

Is there a way to configure the border so that it ignores the transparent areas? (Even if it isn't in CSS... HTML5/JS?)

Example image

enter image description here

Jun 9 in CSS by Edureka
• 9,800 points
230 views

1 answer to this question.

0 votes

 There is a way to accomplish this without utilising canvas, using only CSS, and with only two lines of code.

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

Note: CSS filters are not supported at all in Internet Explorer (let's hope Spartan does better), however here is a compatibility chart.

This initial sample will use the most basic 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="http://i.imgur.com/GZoXRjS.png" width="250">

 As you can see, some images 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  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="http://i.imgur.com/GZoXRjS.png" width="250">

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

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="http://i.imgur.com/GZoXRjS.png" width="250">
answered Jun 13 by Edureka
• 9,540 points

Related Questions In CSS

0 votes
1 answer

html/css hexagon with image inside

The CSS3 clip-path feature is a novel ...READ MORE

answered Jun 10 in CSS by Edureka
• 9,540 points
109 views
0 votes
1 answer

Transparent Box with HTML/CSS?

HOpe this helps you. HTML: <img src="http://lorempixel.com/400/200" /> <div class="box-transparent"> ...READ MORE

answered Jun 13 in CSS by Edureka
• 9,540 points
24 views
0 votes
1 answer

CSS Circle with border

You forgot to set the width of ...READ MORE

answered Jun 13 in CSS by Edureka
• 9,540 points
28 views
0 votes
1 answer

Creating a Zoom Effect on an image on hover using CSS?

Try using the following code: <style> .zoom { ...READ MORE

answered Jun 17 in CSS by Edureka
• 9,540 points
44 views
0 votes
1 answer

Change color of PNG image via CSS?

The simplest one line that worked for ...READ MORE

answered Jun 1 in CSS by Edureka
• 9,540 points
282 views
0 votes
1 answer

Render HTML to an image

To answer your question, there are a ...READ MORE

answered Feb 8 in Java by Soham
• 8,740 points
418 views
0 votes
0 answers

seo - images and h1

I like to have logos instead of ...READ MORE

Mar 9 in Digital Marketing by Kichu
• 19,040 points
58 views
0 votes
0 answers

When to use IMG vs. CSS background-image?

In what situations is it more appropriate ...READ MORE

Mar 10 in Digital Marketing by Kichu
• 19,040 points
33 views
0 votes
1 answer

Is there any way to colorize a white PNG image with CSS only?

Filters can be used with -webkit-filter and ...READ MORE

answered May 27 in CSS by Edureka
• 9,540 points
66 views
0 votes
1 answer

How do I give text or an image a transparent background using CSS?

Use either a semi-transparent PNG or SVG ...READ MORE

answered May 27 in CSS by Edureka
• 9,540 points
34 views
webinar REGISTER FOR FREE WEBINAR X
Send OTP
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP