How can I add a white outline of a button?

Store Design
, ,

Topic summary

A user needs help making a button more visible against an image background by adding a white outline.

Solution Provided:

  • Navigate to Admin > Online Store > Themes > Assets folder
  • Open the main CSS file (main.css, base.css, style.css, or theme.css)
  • Add CSS code at the bottom to apply a 1px solid white border to the button

Follow-up Request:
The user asks about adding rounded corners similar to another element (“Catering box”) on their site.

Status: The initial border issue appears resolved. A suggestion was made about applying rounded corners globally to all buttons (approximately 10px for the catering element), but the conversation remains open regarding the rounded corner implementation.

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

Hi again!

I have a button that is not standing out from the image. I think it would be fine if I add a white outline on the borders.

How can I do that please?

URL:

https://toroeatstreats.com/pages/catering

Question 19.jpg
Question 19.jpg2099Ă—1393 447 KB

2 Likes
2

Hi @abailea077

check this one.

From you Admin page, go to Online Store > Themes

Select the theme you want to edit

Under the Asset folder, open the main.css(base.css, style.css or theme.css)

Then place the code below at the very bottom of the file.

.button-block__button.button-block__button--justify-center a {
    border: 1px solid white;
}

And Save.

result:

Made4uoRibe_0-1725652014699.png
Made4uoRibe_0-1725652014699.png630Ă—393 324 KB

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

1 Like
3

Hi this is Perfect!

I wonder if it’s possible to put round corners as the (Catering box).

Or more simple, is it possible to code that all the buttons on the website has rounded corners?

4

It seems like you already manage to add the rounded corner, the catering have 10px.

1 Like