Change buttons border-radius

Store Design
, , , ,

Topic summary

Issue: The store owner can’t get rounded borders on buttons in the drawer cart (mini cart). They ask for help; one reply requests clarification on which element needs rounding.

Proposed fixes (all via CSS added at the end of theme/base.css):

  • Target drawer cart action buttons using t4s selectors (e.g., #t4s-mini_cart .t4s-drawer__bottom .t4s-btn__cart / .t4s-btn__checkout) and set border-radius (≈29–30px) and border/border-color. One solution also adjusts the outline style’s :after pseudo-element for consistent rounding.
  • Use !important to ensure overrides, including setting a 2px solid #4e102a border and white border-color on outline variants. Another snippet rounds .t4s-minicart-recommendations (20px).
  • Apply a broader rule to .t4s-btn-base and its :before/:after (and a hover effect variant) with a 32px radius to round buttons theme‑wide.

Context: Screenshots show the expected rounded results; no code beyond CSS is required. Terms: border-radius (CSS property for rounded corners), pseudo-elements (:before/:after), !important (forces override).

Status: Multiple valid solutions provided; the original poster hasn’t confirmed resolution. The thread appears open.

Summarized with AI on December 24. AI used: gpt-5.
1

Hi, for some reason I can’t make the borders round in the drawer cart. Can anyone help ?

https://aaba5d-52.myshopify.com/

Daniel19901_0-1721299725332.png
Daniel19901_0-1721299725332.png1904×874 212 KB

2 Likes
2

Hello There,

can you please clarify which border you need to modify? Cart Drawer corner ? Button inside it or any other please mark it.

Thank You

3

Hi @Daniel19901

Check this one.

  1. From you Admin page, go to Online Store > Themes
  2. Select the theme you want to edit
  3. Under the Asset folder, open the main.css(base.css, style.css or theme.css)
  4. Then place the code below at the very bottom of the file.
#t4s-mini_cart .t4s-drawer__bottom .t4s-btn__cart, #t4s-mini_cart .t4s-drawer__bottom .t4s-btn__checkout  {
    border-radius: 30px;
    border-color: #4e102a;
}

.t4s-btn-base.t4s-btn-style-outline:after {
     border-radius: 30px;
    border-color: #4e102a;
}

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

1 Like
4
  • Here is the solution for you @Daniel19901
  • Please follow these steps:

step.png
step.png1865×854 125 KB

  • Then find the base.css file.
  • Then add the following code at the end of the file and press ‘Save’ to save it.
.t4s-minicart-recommendations {
    border-radius: 20px !important;
}
#t4s-mini_cart .t4s-drawer__bottom .t4s-btn__cart {
border-radius: 29px !important;
    border: 2px solid #4e102a !important;
}
.t4s-btn-base.t4s-btn-style-outline:after {
border-color: white !important;
}
  • Here is the result you will achieve:

BSSTekLabs_0-1721303804286.png
BSSTekLabs_0-1721303804286.png480×816 46.3 KB

  • Please press ‘Like’ and mark it as ‘Solution’ if you find it helpful. Thank you.
1 Like
5

Hi @Daniel19901 ,

You can change button border radius by adding a simple line of css.

In your Shopify store go to online store > themes > click on the three dots in your theme> edit code

Here, you can search for theme.css in your left sidebar.

And paste this code there.

.t4s-btn-base, 
.t4s-btn-base.t4s-btn-style-outline:before, 
.t4s-btn-base.t4s-btn-style-outline:after, 
.t4s-btn-base.t4s-btn-effect-rectangle-out:hover:before {
    border-radius: 32px;
}

Result :-

Sweans_0-1721305004521.png
Sweans_0-1721305004521.png1157×604 145 KB

If you need further assistance, feel free to reach out!
I hope this helps! If it does, please like it and mark it as a solution!

Regards,

Sweans