How to make around image border/drop shadow effect on CSS

Question

I was making a frontend UI and there was a part I was stuck at for quite some time now. I wanted to add an effect around image as shown below.

I have been researching on this but couldn't find a proper solution. I think we can somehow do it with:

Adding some kind of border specific negative margin
Somehow with drop shadow/box shadow properties

Would really love to know, how this works.

user_17755777 · Answer

Here is one for you.

Dont forget to add

img {
  max-width: 100%;
  display: block;
}

For image to act like div

https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow

body {
  
  min-height: 100vh;
  display: grid;
  place-items: center;
}

.container{
  height:300px;
  width:300px;
  border: 2px solid black;
  box-shadow: 5px 5px red, 
    5px 5px 0px 1.5px black;
}

How to make around image border/drop shadow effect on CSS

1 Answers