Button Outline Remove

Store Design
1

Hi there,

I am making this certain button have rounded edges, and it worked but there is still a rectangle outline on the outside. Please see screenshot! Would like to remove this. Thanks so much. Ella.

Screenshot 2025-10-11 at 07.55.54
Screenshot 2025-10-11 at 07.55.541920Ă—1133 132 KB

PW: theset2025

1 Like
2

Hey Ella @ellacoker!
Got it — thanks for sharing the screenshot!

You’ve already done a good job rounding the button itself (border-radius: 15px).
That faint rectangular outline you’re still seeing is most likely a focus ring or box-shadow added by the theme or browser when the button is clicked or focused. Try adding this extra CSS to fully remove it:

.button {
  border-radius: 15px !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

.button:focus,
.button:active {
  outline: none !important;
  box-shadow: none !important;
}

  • box-shadow: none removes any subtle shadow that might be appearing as an outer rectangle.

  • The :focus and :active states ensure it stays removed when the button is clicked or tabbed to.

If that still doesn’t work, your theme might use a different class (for example, .slideshow__button or .button--primary).
You can find the exact class by right-clicking the button → Inspect Element → check the <button> tag class, then target that in your CSS instead.

Would you like to tell me which Shopify theme you’re using (e.g., Dawn, Craft, Studio)? I can give you the exact selector for it.

Regards,
EmbedAny Support

3

This is not an CSS outline, is’t a pseudo-element.
I’d recommend removing the code you’ve added and instead add this

.button {
  --buttons-radius: 15px;
  border-radius: var(--buttons-radius);
}

The pseudo-element uses this CSS variable for borde-radius.

4

Hello @ellacoker,

That outer rectangle is created by the theme’s ::after pseudo-element, which adds a shadow “ring” around buttons. You can remove it with the following CSS override:

a.button.button--primary::after,
a.button.button--primary:hover::after,
a.button.button--primary:focus::after {
  box-shadow: none !important;
}

Add this in Customize → Theme settings → Custom CSS (or your main stylesheet).
If anything still shows, you can also disable the pseudo-element entirely:

a.button.button--primary::after { content: none !important; }

This will keep your rounded button without the outer outline.