How to add borders around images

Hey Guys,

How can I add a border around an image? I tried with custom css but only found a code for text. See attached photo please, Thank you.

All images? Add to Home > Design > Custom CSS

img {
	border: 5px solid violet;
}

@tuanphan I tried this here but got an expanded border. Do you have code for borders on images and also text boxes (that doesnt use the markdown box)? Just specific boxes and images not them all - #block-yui_3_17_2_1_1598373529135_8687
{border: 3px solid white;}

https://loveintegrationyoga.squarespace.com/

password - loveintegrationyoga

1 minute ago, Hannahmay said:

@tuanphan I tried this here but got an expanded border. Do you have code for borders on images and also text boxes (that doesnt use the markdown box)? Just specific boxes and images not them all - #block-yui_3_17_2_1_1598373529135_8687
{border: 3px solid white;}

https://loveintegrationyoga.squarespace.com/

 

password - loveintegrationyoga

 

Which boxes? Can you take a screenshot?

Try adding

#block-yui_3_17_2_1_1598373529135_8687
{border: 3px solid white;

background: white;}

to the image! You might have to mess with the border sizes to make it even, but at least it gets rid of that pesky border gap.

does anyone know how to have a border round an inline image but not its caption? 

@failbetter

Please post the URL for the page where your your image is located on your site.

If your site is not public please set up a site-wide password, if you've not already done so.

Post the password here.

Adding a site-wide password is not a security breach. Please read the documentation at the link provided to understand how it works.

We can then take a look at your issue.

On 2/22/2021 at 8:28 PM, failbetter said:

does anyone know how to have a border round an inline image but not its caption? 

Hi. Can you share site url?

On 7/20/2020 at 9:55 AM, tuanphan said:

All images? Add to Home > Design > Custom CSS

img {
	border: 5px solid violet;
}

 

Hey there. I tried using this code and it only gives me a border on the left side and top of the image. Any suggestions?

Hey! I am using this code to apply a bottom line to all images:

img {
    border-bottom: 7px solid #f26522;
}

This works perfectly, however it is not applying to all images and is adding a bottom border to my site logo. I used exclusion code on the block ID (collection ID in this case) for the logo, but the ID for the logo is different on each page.

#collection-61a7b201d6e16e3abab16244 .header-title-logo img {border-bottom: none !important}

This is fine for set up, but once I hand it to my client, each time they add a new project to the blog, the exclusion code will need to be updated to include any new pages.

Any suggestions? Thanks!

This worked for me... 

.portfolio-grid-basic .grid-item .grid-image {
  border:1vw solid white;

}

On 1/5/2022 at 7:26 AM, thewayfaringdesigner said:

Hey! I am using this code to apply a bottom line to all images:

img {
    border-bottom: 7px solid #f26522;
}

This works perfectly, however it is not applying to all images and is adding a bottom border to my site logo. I used exclusion code on the block ID (collection ID in this case) for the logo, but the ID for the logo is different on each page.

#collection-61a7b201d6e16e3abab16244 .header-title-logo img {border-bottom: none !important}

This is fine for set up, but once I hand it to my client, each time they add a new project to the blog, the exclusion code will need to be updated to include any new pages.

Any suggestions? Thanks!

Each template has a different structure, can you share link to your site? We can give new code easier

https://precision-aluminum.squarespace.com/

password: booyellowpages

Thanks!

10 hours ago, thewayfaringdesigner said:

https://precision-aluminum.squarespace.com/

password: booyellowpages

 

Thanks!

Use this code

article img {
    border-bottom: 7px solid #f26522;
}

with some images in image blocks, eg 4 image boxes on homepage, you need to remove all space inside images first

On 7/20/2020 at 11:25 PM, tuanphan said:

All images? Add to Home > Design > Custom CSS

img {
	border: 5px solid violet;
}

 

Hi Tuan,

I tried your code however seem to run into problems with the border. It becomes cut off (see attached screenshot). Do you know of any other ways to get this to work? 

Thanks,

Jordy 🙂

On 2/9/2022 at 4:47 PM, Jordy_TheShop said:

Hi Tuan,

I tried your code however seem to run into problems with the border. It becomes cut off (see attached screenshot). Do you know of any other ways to get this to work? 

Thanks,

Jordy 🙂

Do you still need help? Can you share link to page in screenshot?

I am also only getting a border on the top & left side of image. I am trying to do this in list images, I am using the code:

.list-item:hover .list-image

{border: solid 1.4px #161616;}

but can't get the border all the way around the image on hover. 

Can anyone help?

4 minutes ago, Cara2408 said:

Can anyone help?

Please post the URL for a page on your site where we can see your issue.

If your site is not public please set up a site-wide password, if you've not already done so.

Post the password here.

Adding a site-wide password does not allow anyone to alter your site. It only allows those with the password to see your site. Please read the documentation at the link provided to understand how it works.

Please read the documentation at the link provided on how to share a link to your site to understand how it works. A link to the backend of the your site won’t work for us, i.e. a url that contains /config/.

We can then take a look at your issue.

I figured out the problem - When image crop is turned on, the border crops off. Turn image crop on original. You will just have to pre-size your images before uploading

Hello,

I want to be able to add borders to the product listings but I noticed our title also has a border added to it, how can I keep borders on our listings but not have a border added to our site title/logo ( see atached).

24 minutes ago, LauraLeeDesigns said:

I want to be able to add borders to the product listings

Add the following to Store Settings > Advanced > Page Header Code Injection for the store page. Please see per-page code injection.

<style>
  
  #productList .product .product-image img {
  
    border : solid 10px;
    
    }
	
  </style>

This is for v7.0 using the Montauk template family.

Let us know how it goes.

On 2/18/2022 at 7:35 AM, tuanphan said:

Do you still need help? Can you share link to page in screenshot?

I am having this same problem with a code for a border on the product item page. I have tried 2 codes one does the cut off like the example in this photo the other code works perfect on desktop but on mobile doesn't wrap the image perfectly and leaves a large gap

my site isn't finished but is public so I can get help faceoflove.squarespace.com

Just now, nahlah said:

I am having this same problem with a code for a border on the product item page. I have tried 2 codes one does the cut off like the example in this photo the other code works perfect on desktop but on mobile doesn't wrap the image perfectly and leaves a large gap

 

my site isn't finished but is public so I can get help faceoflove.squarespace.com

ALSO the borders around the images throughout my site seem to be off center in the mobile version designing with the new fluid feature I can't get the images to be centered even when I place them in the center they end up shifting

On 8/4/2022 at 12:23 PM, creedon said:

Add the following to Store Settings > Advanced > Page Header Code Injection for the store page. Please see per-page code injection.

<style>
  
  #productList .product .product-image img {
  
    border : solid 10px;
    
    }
	
  </style>

This is for v7.0 using the Montauk template family.

Let us know how it goes.

Thank you so much once again !

It worked out great for us, appreciate all your help.