How to Add Borders to Your Squarespace Website Sections
If you have been trying to figure out how in the world to get those beautiful, aesthetic borders added to your Squarespace website to separate your sections, then this quick tutorial is for you!
The newest trend that I’m loving with website design is adding thin lines to separate each section on a website page to create a minimal, clean feel to a website. But Squarespace doesn’t natively let you just add little lines between each section.
Below, I’ll share the exact code you need to add to achieve this border section look on all pages of your website (hint - it’s just a quick copy and paste!)
Don’t feel like reading? Then watch the Youtube video below, where I demo exactly what you need to do in this post in video format!
Add Borders to Your Sections - 7.1 Version
First, you are going to head over to Design -> Custom CSS to get some custom code added.
Note: Make sure to start a new line if you already have code in this section.
Next, you are going to paste the following code:
@site-border-style: 1px solid #000;
main, footer, header {
border-left: @site-border-style;
border-right: @site-border-style;
border-bottom: @site-border-style;
}
.page-section { border-bottom: @site-border-style; }
Wondering how to modify the size or color of the border?
Border Size: On the first line, change the value of 1px to whatever size looks best (i.e 20px, 1.3px, 5px, etc)
Border Color: On the first line, change the value of #000 to whatever hex code you want it to be (i.e. #ffffff, #A020F0, etc)
Don’t want a border below the header?
Remove , header from the second line (don’t forget to remove the comma!)
Don’t want a border below the footer?
Remove , footer from the second line (don’t forget to remove the comma!)
Add Borders to Your Sections - 7.0 Version
First, you are going to head over to Design -> Custom CSS to get some custom code added.
Note: Make sure to start a new line if you already have code in this section.
Next, you are going to paste the following code:
@site-border-style: 1px solid #000;
main, footer, header {
border-left: @site-border-style;
border-right: @site-border-style;
border-bottom: @site-border-style;
}
section { border-bottom: @site-border-style; }
Wondering how to modify the size or color of the border?
Border Size: On the first line, change the value of 1px to whatever size looks best (i.e 20px, 1.3px, 5px, etc)
Border Color: On the first line, change the value of #000 to whatever hex code you want it to be (i.e. #ffffff, #A020F0, etc)
Don’t want a border below the header?
Remove , header from the second line (don’t forget to remove the comma!)
Don’t want a border below the footer?
Remove , footer from the second line (don’t forget to remove the comma!)
And that’s all! Super easy to add, not hard, confusing code, and you’ve got some beautiful borders surrounding your Squarespace website sections with a quick copy and paste of some code!
