Skip to content
All Answers
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

Buttons

How do I change the button hover color in Squarespace?

Buttons

How do I add a border to buttons in Squarespace?

Forms

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

Blog

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.

Long Drive MarketingTalk to Long Drive Marketing →