Change Quantity and Size border radius for Impulse theme

[chlgr]

Hello, I tried many codes but nothing works, I want a code that change the border of Quantity and Size (variants) to rounded border in the product page. I am using Shopify Impulse theme, my website is https://www.gamingrushers.com

as you can see both of Quantity and Size boxes are square, I want them rounded with border radius.

[PageFly-Henry]

HI @chlgr 

This is Henry from PageFly - Landing Page Builder App

You can try this code by following these steps: 

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file theme.css

Step 3: Paste the below code at bottom of the file -> Save

.variant-wrapper label.variant__button-label {

    border-radius: 50px  !important;

}

Hope that my solution works for you.

Best regards,

Henry | PageFly

[Hardik29418]

Please go to
1) Online store
2) Themes -> Edit theme
3) Layout
4) theme.liquid and paste this code before </head>

<style>
  .js-qty__wrapper .js-qty__num, .variant-input .variant__button-label {
    border-radius: 6px !important;
  }
</style>

If my solution works, then please like and accept it as a solution.

[chlgr]

Hello thanks for the code it worked for quantity, size borders but the problem is that it affect the Color too. I wish if you can give me a code that does not affect the Color border cause it seems unprofessional when looking at it. (look at screenshot below)