How to Create Borders around Images in Squarespace without Code
I’m guessing Squarespace added another feature without letting us know..
It wasn’t long ago that Squarespace added their “Shape” feature along with some other cool things. This feature has been great for adding in background depth to sections, creating a layered collage effect when paired with images, and another one which I will talk about now!
A few weeks ago I was creating image border and section boarders with css. Now you are officially able to do both without code! Creating bordered sections is obvious as Squarespace gives you a direct option within the section settings. Now creating boarders with shapes is not so obvious, and more hack like. Let’s go through a few really simple steps so that you can begin to utilize borders without code!
create a new section (if you need to) and add an image. I choose a nice pink stock image that is free.
2. Next, crop it the way you would like, it doesn’t need to be a perfect square, and we will go over other shapes in a moment. So just stick with a square or rectangle for now. Now comes the fun part, add a shape to your section and choose a square, but make sure you click on stretch so that you can adjust it. Then spread it over your image.
3. Now head to the shape settings. From here you will want to turn the opacity down to zero because we don’t want the shape colour to appear at all. Then you will add a line adjust the line settings to your liking. For me, I always prefer a black thin boarder. See my settings below.
And voila! An image border with absolutely no code! Please note that you will need to adjust the location of these items within your mobile version as well.
Play around with some shapes and see what you get! I was able to pretty successfully add a border to a circle by following the same steps.
