How to add a border to a folder in Squarespace
If you’ve used Squarespace for any amount of time, you’ll have probably noticed that you don’t have much in the way of customisation options for your folders. What you see is really what you get. But what if you want to add a border to a folder on Squarespace?
Is it possible? How do you do it?
Luckily, the answer is yes - and I’ll show you!
If you want to add some serious flair to your folders, you’ve come to the right place.
Before we do anything though, you'll need to create a folder. Go to “pages” and click on the plus icon.
From the dropdown menu, select “Folder” and give it a name. For this example, we'll call it About. Drag the folder to where you want it on your website, and then add your content to it. You'll know the content is in the folder when it snaps into place.
Next, head to the “Design” tab and click on Custom CSS. Create a new line and paste in the following code:
.header-nav-folder-content {
border: 1px solid;
}
Watch the video
Check out the YouTube video below 👇
This will give your folder a black or white border depending on what colour the background is. Dark colours will have white whilst light colours will have black.
If you want to change the color, you can use a hex code (e.g. #FFF for white), RGB code (e.g. 0,129,200), or even an RGBA code (e.g. 0,129,200, 0.5) if you’d like your border to be slightly opaque. For example, to change the border to blue, you would use the following code:
.header-nav-folder-content {
border: 2px solid #0000FF;
}
📩 Join the inner circle to get exclusive code updates
You can also adjust the thickness of the border by changing the PX value. For example, if you wanted something thicker, you could with:
.header-nav-folder-content {
border: 5px solid #FFF;
}
And if you want to round the corners of your folder whilst keeping the border, you could use this:
.header-nav-folder-content {
border: 5px solid #FFF;
border-radius: 20px;
}
And that is that. With just a few lines of code, we’ve given your site a unique makeover that’ll help it stand out from the crowd.
Your designer
I'm Sam, an award-winning Squarespace web designer. I have worked with every type of business, building platforms for solo entrepreneurs through to multi-million dollar corporations. If you want to discuss a potential project, you can email on sam@bycrawford.com or get in touch with me here. Alternatively, you can book in a free 15-minute consultation call here.