Make all button labels slightly curved corner

Store Design
, ,

Topic summary

A user wants to add slightly curved corners (border-radius) to all button labels on their Shopify store (Dawn theme). They provided screenshots showing the current sharp-cornered buttons and the desired rounded appearance.

Initial Solutions:

  • Two responders suggested adding CSS code targeting .button class with border-radius: 5px !important; to the theme’s CSS file (base.css/theme.css).
  • One solution involved adding code to theme.liquid file above the </body> tag.

Issue:
The user reported that initial solutions only worked for specific buttons and didn’t apply universally across the site or on desktop.

Refined Solutions:
Multiple responders provided updated CSS targeting additional pseudo-elements:

  • .button:before, .button:after, .button { border-radius: 5px !important; }
  • Most comprehensive solution targets: .button:after, .shopify-challenge__button:after, .customer button:after, .shopify-payment-button__button--unbranded:after

The final solution includes screenshots demonstrating successful application across different button types. Status: Multiple working solutions provided, awaiting user confirmation of which resolved the issue completely.

Summarized with AI on November 1. AI used: claude-sonnet-4-5-20250929.
1

hello, i would like to make all my button labels have slightly curved corners:

Screenshot 2025-01-28 at 17.02.47.png
Screenshot 2025-01-28 at 17.02.47.png892Ă—404 170 KB

this is my store, i want it to look something like this:

IMG_6553.jpg
IMG_6553.jpg491Ă—327 10.5 KB

as you can see here, there is a slight curve to the corners

my website is www.antico-abito.com , password is chasha , theme is dawn

2 Likes
2

Hey @ads18922

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code in the bottom of the file above tag

RESULT:

Moeed_0-1738084250050.png
Moeed_0-1738084250050.png346Ă—750 105 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

3

Hi @ads18922 ,

Go to Online Store, then Theme, and select Edit Code.
Search for base.css/theme.css/style.css/main.css/custom.css file Add the provided code at the end of the file.

.button {
    border-radius: 5px !important;
}

CodingFifty_0-1738084469688.png
CodingFifty_0-1738084469688.png415Ă—500 184 KB

4

hello, that worked for that specific button, however, it hasnt worked for the rest of the buttons. It also doesn’t work on desktop

Screenshot 2025-01-28 at 17.20.07.png
Screenshot 2025-01-28 at 17.20.07.png686Ă—228 8.93 KB

5

hello, that worked for that specific button, however, it hasnt worked for the rest of the buttons. It also doesn’t work on desktop

Screenshot 2025-01-28 at 17.20.07.png
Screenshot 2025-01-28 at 17.20.07.png686Ă—228 8.93 KB

6

Hi @ads18922 ,

Go to Online Store, then Theme, and select Edit Code.
Search for base.css/theme.css/style.css/main.css/custom.css file Add the provided code at the end of the file.

.button:before,
.button:after,
.button {
    border-radius: 5px !important;
}
7

Hi,

Go to online store, then chose edit code, open base.css file and paste the following code at the bottom

.button:after {border-radius: 5px;}

Let me know if you still need help

8

Hi @ads18922

Try this one.

  1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  3. In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
.button:after, .shopify-challenge__button:after, .customer button:after, .shopify-payment-button__button--unbranded:after {
    border-radius: 5px !important;
}

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!