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, 2022 in CSS by Edureka
• 13,620 points
6,588 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, 2022 by Edureka
• 12,690 points

Related Questions In CSS

0 votes
0 answers

Adding Thumbnail Image With CSS Border

I'm attempting to replicate Lynda.com's course listing ...READ MORE

Aug 22, 2022 in CSS by Edureka
• 13,620 points
682 views
0 votes
1 answer

html/css hexagon with image inside

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

answered Jun 10, 2022 in CSS by Edureka
• 12,690 points
2,261 views
0 votes
1 answer

Transparent Box with HTML/CSS?

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

answered Jun 13, 2022 in CSS by Edureka
• 12,690 points
1,596 views
0 votes
1 answer

CSS Circle with border

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

answered Jun 13, 2022 in CSS by Edureka
• 12,690 points
1,072 views
0 votes
1 answer

Change color of PNG image via CSS?

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

answered Jun 1, 2022 in CSS by Edureka
• 12,690 points
6,462 views
0 votes
1 answer

Render HTML to an image

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

answered Feb 8, 2022 in Java by Soham
• 9,710 points
1,840 views
0 votes
1 answer

seo - images and h1

SEO is speculative at best. Generally, the accepted ...READ MORE

answered Mar 11, 2022 in Digital Marketing by narikkadan
• 63,680 points
783 views
0 votes
0 answers

When to use IMG vs. CSS background-image?

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

Mar 10, 2022 in Digital Marketing by Kichu
• 19,050 points
613 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, 2022 in CSS by Edureka
• 12,690 points
1,919 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, 2022 in CSS by Edureka
• 12,690 points
599 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP