Buttons

How do I make buttons fully rounded (pill-shaped) in Squarespace?

Set border-radius to a very high value (like 50px or 9999px) to create pill-shaped buttons. This rounds the corners fully regardless of button height.

Apply it to all button elements sitewide, or target specific buttons using their parent section ID if you only want rounded buttons in certain places.

/* All buttons sitewide */
.sqs-block-button-element--small,
.sqs-block-button-element--medium,
.sqs-block-button-element--large {
  border-radius: 50px !important;
}

/* Form submit buttons too */
.form-submit-button {
  border-radius: 50px !important;
}

/* Commerce buttons */
.sqs-add-to-cart-button {
  border-radius: 50px !important;
}

Generate rounded buttons with our Button GeneratorTry it free →

Related Questions

How do I change the button hover color in Squarespace?

How do I add a border to buttons in Squarespace?

How do I change the form submit button color in Squarespace?

How do I style blog category tags in Squarespace?

A little over your head?

No shame — this stuff is hard. Let the pros handle it.

Talk to Long Drive Marketing →