How to add rounded corners on section backgrounds in Squarespace

While it’s easy to have rounded corners on Fluid Engine blocks (you can set that in the settings), on section backgrounds it’s not possible without adding some custom CSS.

Add the code to Pages › Website Tools › Custom CSS, replacing the border-radius value if needed.

For all sections:

.section-background {
  overflow: hidden;
  border-radius: 24px; 
}

For a single section: find section ID and replace data-section-id in the code:

[data-section-id="672fd359a2b0cd11a73b13b8"] .section-background {
  overflow: hidden;
  border-radius: 24px; 
}