-1

I am trying to develop a company's team page that uses an irregular-shaped png image but needs to have a red border around the image.

The finished product needs to look like the following: enter image description here

The image I was given is this: enter image description here

Is there a way using css/js to give the image a border that stays right on the area where the irregular shape is?

Have searched high and low but could not find a workable solution.

J.Keefe
  • 100
  • 1
  • 9
  • 3
    Will this border change color on hover or something ...? If not, make it in photoshop... – sinisake Dec 18 '17 at 18:30
  • Add the border using a photo-editing software, because that image is actually rectangular – Brigo Dec 18 '17 at 18:30
  • The goal would obviously be to use a hover state that could change the border color. Just looking to see if it is possible – J.Keefe Dec 18 '17 at 18:40
  • 1
    Possible duplicate of [CSS Border on PNG image with transparent parts](https://stackoverflow.com/questions/12690444/css-border-on-png-image-with-transparent-parts) – showdev Dec 18 '17 at 18:44

1 Answers1

4

You'll need to remove the the white unused space to alpha channel using an image editor and save it as a .png file then you can make use of drop shadow to apply the desired effect. The following is just a demonstration:

img {
  width: 70%;
  filter: drop-shadow(4px 0px 0 red);
}
<img src="https://s7.postimg.org/65lydsb57/a_Ql6e.png">