Adding border to image make it offset from the wrapper

Hi there!

I'm trying to add a while border to all images in a specific section. I'm using this code for each blockID

#block-0c00759fd0846c881ded {
    border: 8px solid white;
  padding: -8px;
}

The issue is that it's making the image not fit inside the wrapper anymore, which isn't that big of a deal on desktop but on web it means everything is slightly off. See image below.

So two questions:

1. How do I set the stroke to align to the inside of the image wrapper so the image stays within the box I've made for it.

2. How do I add it to all images in a section without having to call out each blockID individually 

Try this method using a pseudo-element:

#block-0c00759fd0846c881ded:after {
  content:'';
  position:absolute;
  height:100%;
  width:100%;
  background-color:none;
  border:8px solid #fff;
  top:18px;
  right:-30px;
}

Play with the border, top and right values to get the look you want.

Let me know how that works for you.

Thank you for this code. I am trying to create on offset border that is layered behind the image instead of the full border being on top of the image. Is there a way to do this so that the border doesn't actually overlap the image on the top/left side? See attached. Thanks very much!

@sunicreative Can you share your site URL for context? 

Sure. It's definitely a work in progress lol but here you go:

mackerel-bamboo-7why.squarespace.com 

password: W3arItAgain

On 8/29/2024 at 3:08 AM, sunicreative said:

Sure. It's definitely a work in progress lol but here you go:

 

mackerel-bamboo-7why.squarespace.com 

password: W3arItAgain

 

Where is this image? I can't find it on Home or About page

https://mackerel-bamboo-7why.squarespace.com/about