Squarespace have been rolling out various updates to the editing capabilities of the header section recently, however there’s one thing that they’re still yet to offer as a native feature that often proves popular in Squarespace design - rounding the corners of a header.

Rounding the corners of a header section, whether it’s all four or just two, can create a really cool design but currently, it’s not something you can do natively on Squarespace.

The good news is that I’ve got just the code you need to round your headers and enhance your web design.

Watch the video

Check out the YouTube video below 👇

Six Figure Design Club framework for designing a perfect homepage — *Want a framework for designing the perfect homepage?*

Access now

How to round the corners of a header on Squarespace

First things first you need to ensure your header is a solid colour or you have a dynamic header in use.

Then, head to your custom CSS panel and add in the following code:

.header {

border-radius: 0px 0px 20px 20px;

overflow: hidden;

}

If you want your header to be floating, so that it doesn’t reach the top of the page, you just need to add a margin in and play around with the size of the margin until you achieve your desired result

.header {

border-radius: 0px 0px 20px 20px;

overflow: hidden;

margin: 10px;

}

In order to make specific corners rounded, rather than all four, you’ll need to add the pixel value for all four corners into the code for example: 0px, 0px, 50px, 50px (this exact breakdown will result in the two bottom corners being rounded FYI!)

Adding rounded corners to your header can be a really nice design feature, especially if you opt to have rounded corners running throughout your website (on CTA buttons and image blocks etc).

And that’s literally it. See, I told you it was simple!

If you found this article useful feel free to share it online and why not check out my tutorial for adding a button to a header next?