Round the corners of header on Squarespace

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 👇

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!)

---

📩 Join the inner circle to get exclusive code updates

---

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?

---

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.

---

Want more?