How to add image borders and section borders to your Squarespace website
Borders are a great way to add structure to your website design, particularly if you have a very structured brand identity. Unfortunately Squarespace doesn’t have an option to add borders…. but it can be achieved really easily with just a few short lines of code.
In this simple tutorial, you’ll learn to add a square or rounded border to your Squarespace images and how to add section borders to neatly divide every section on your website. All you need to do is follow along and paste the following code into your own site!
Prep: Where to paste your CSS code in Squarespace
First things first, you’ll want to find the CSS panel which is where you’ll be pasting your code. From the main admin area, go to the Design tab and then click on the option called ‘Custom CSS’.
Part 1: How to add a simple border to your Squarespace images
To apply a simple border to all images on your website, simply paste the below code into the CSS panel. Increase the value of 1px change the thickness of the border and swap the colour #344B05 with your own brand colour.
.sqs-image {
border: 1px solid #344B05;
}
Part 2: How to add a curved border to your Squarespace images
Rounded corners can work really well for more playful, fun branding. To make your image border rounded, all you need to do is add the below code. It’s the same as the previous step with an additional line of code for the border-radius. You can increase or decrease the value to adjust how rounded you want the corners to be.
.sqs-image {
border: 1px solid #344B05;
border-radius: 50px;
}
Part 3. How to add borders to all page sections in Squarespace.
Please note you can now add section dividers on newer versions of Squarespace rather than code.
Last but not least, use the following code to add borders to each section on your website. Increase the value of 1px change the thickness of the border and swap the colour #344B05 with your own brand colour.
.page-section {
border-bottom: 1px solid #344B05;
}
Hi I’m Danielle
I help entrepreneurs & creatives to bring their brand online through beautiful, strategic web design. Click below to learn more about how I can help you to launch your dream website.
