Border around product images

Is there anything I can put in the css to call in an image based border around the product images. See an example of what I want here. https://www.lazyoaf.co.uk and click on Men's Tees. You'll see there is an image based border around the product pics. And then when you click on the photo to see the larger image, there is no border (so they uploaded the pics with no border and then in the product pages, there is a border). Hope that makes sense! Thanks.

The frames around the pics are bacground images within the table cells.

See the "frame" on its own here:-

http://89.234.7.160/lazyoaf.co.uk/images/mainframe_new.jpg

And here's the html that sets it all out...

<!---table--->
<table border="0" cellspacing="0" cellpadding="0"><tr>
<td valign="top">

<input type=hidden name=temp_color id=temp_color>
<input type=hidden name=is_reverse id=is_reverse>

			  <table border="0" cellspacing="0" cellpadding="2" align="left" >

				<tr>
				  <td align="center" class="smallText" colspan="2" valign="top">
				  <table border="0" cellspacing="0" cellpadding="33" background="images/mainframe_new.jpg">
				  <tr><td align="center">

<span id="change_color"><a href="javascript:popupWindow('http://89.234.7.160/lazyoaf.co.uk/popup_image.php?pID=644&oscsid=1ff4bad123550c03278cb4a0f131fb56')"><img src="images/mt_cloudnstr_med.jpg" border="0" width="244" height="308" hspace="3" vspace="5"></a></span><noscript>
<a href="http://89.234.7.160/lazyoaf.co.uk/images/mt_cloudnstr_lrg.jpg?oscsid=1ff4bad123550c03278cb4a0f131fb56" target="_blank"><img src="images/mt_cloudnstr_sml.jpg" border="0" alt="Cloud and stars Men's T-shirt" title=" Cloud and stars Men's T-shirt " width="61" height="77" hspace="5" vspace="5" name="bigpic"></a></noscript></td></tr>
</table>

OK thanks. In Zen cart do you know what page I add that html to? Obviously I'll need to change the image. So do I just upload my border image to the images folder?

You're looking at changes to the template files. The most relevant pages are likely to be:-

tpl_modules_main_product_image.php
tpl_product_info_display.php

But there may be others...

It's not a case of changing html... this is PHP and you may need to hire someone to code it for you.

Is there no way to put in the css where #productMainImage is and add something after that to call in a border (just like you would for a 1 px border)?

You could try something with the CSS.

I just did this option:-

#productMainImage {
	border-left: 5px solid #a2f4f7;
	border-top: 5px solid #a2f4f7;
	border-right: 5px solid #a2f4f7;
	border-bottom: 5px solid #a2f4f7;
	}

And I get a light blue frame around the main pic, 5 pixels thick.

I'm not sure what css you would use to insert BG images - you can't use the "border" instruction.

I tried putting background-image: ... in the css and it sort of works, but I can't get the spacing right.

Does anyone know what I can put in the css to make it seem like there is an image border around the product images?

Thanks.

You may save yourself a lot of time if you go to an online tutorial about css.

Here's a good one:

https://www.w3schools.com/css/default.asp