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.

How to add a border to a folder in Squarespace 1

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;

}

How to add a border to a folder in Squarespace 2

Watch the video

Check out the YouTube video below 👇

*Want a framework for designing the perfect homepage?*

Access now

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;

}

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;

}