As of 28th May 2016, only the most current version of Aarcade themes will receive personal support and updates – read more…

  Back to Top

How do I add a border to my product images?

Filed in Advanced Customisation

Note that advanced customisation support articles are provided as a courtesy to Aarcade and Big Cartel users. Aarcade does not provide support for advanced customisation. Please read the following related articles:

1. Product Listing / Grid Pages

To add a border to the product images in the product listing / grid pages we paste the following style group into the style coding area – ref. Where do I add custom style coding in my Big Cartel theme controls?

/* - - - - Product Image Border for Products Pages */
.shop_thumb_img_holder img.product_img,
.shop_thumb_img_holder span.product_img {
	max-width: 100%;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	border: 1px solid #000000;
	border-radius: 4px; /* Optional rounded corners */
	}

Explanation

max-width: 100%;

Ensures that the product image size will never be wider than the element that is containing it. See w3schools > max-width for more information.

-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;

Includes the border when applying the max-width sizing, therefore ensuring that the image and its border will not be wider that the element containing it. The three formats of this style are required for cross-browser compatibility. See w3schools > box-sizing for more information.

border: 1px solid #000000;

Defines the width, style and colour of the image border. For example, the above style will add a 1 pixel wide solid black border. The style for a 2 pixel wide solid white border would is:

border: 2px solid #ffffff;

See w3schools > color picker and w3schools > border for more information.

border-radius: 4px;

This line is optional and defines a border radius, i.e. rounded corners.

2. Product Pages

To add a border to the main product image on the product page we paste the following style group into the style coding area – ref. Where do I add custom style coding in my Big Cartel theme controls?

/* - - - - Border for Product Page Main Image */
#product_images .product_img img {
	max-width: 100%;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	border: 1px solid #000000;
	border-radius: 4px; /* Optional rounded corners */
	}

To add a border to the navigation images:

/* - - - - Border for Product Page Navigation Images */
#content #product_main .images_nav ul.images_list li a img {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	border: 1px solid #000000;
	}

Note that the max-width style has been omitted since the navigation image sizing is already managed by the theme styling.

To add a border to the other products images:

/* - - - - Border for Product Page Other Products Images */
.other_product_thumb img.other_product_img {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	border: 1px solid #000000;
	}

Note that the max-width style has been omitted since the navigation image sizing is already managed by the theme styling.

Refer to section 1 of this article for further style explanation.

Related articles...