How can I change the outline color of my variant button pills?

[ScanMe]

Hi, can someone help me on changing the outline color of my variant button pills? I suppose it is set to white and I cant change it. I want to put it how it is on the "Whats my size?" button

[YOD_Solutions]

Hello @ScanMe 

It would be easier to help you if you would share your product page url.

[ScanMe]

sure, scanme-world.com 

the password is "feedback"

[YOD_Solutions · Accepted solution]

In your "section-main-product.css" file in the "assets" folder change the border property of ".product-form__input input[type='radio'] + label" as shown here:

.product-form__input input[type='radio'] + label {
  border: 1px solid rgba(var(--color-foreground), var(--variant-pills-border-opacity));
  background-color: rgb(var(--color-background));
  color: rgba(var(--color-foreground));
  border-radius: var(--variant-pills-radius);
  color: rgb(var(--color-foreground));
  display: inline-block;
  margin: 0.7rem 0.5rem 0.2rem 0;
  padding: 1rem 2rem;
  font-size: 1.4rem;
  letter-spacing: 0.1rem;
  line-height: 1;
  text-align: center;
  transition: border var(--duration-short) ease;
  cursor: pointer;
  position: relative;
}

Replace "var(--variant-pills-border-width)"  with "1px"

[ScanMe]

You're a legend. 

At the moment the outline is grey, if I change the rgba code it goes blue, I don't know why. Do you know how I can change it to black?

[YOD_Solutions]

To make it black replace "var(--variant-pills-border-opacity)"  to "1".

border: 1px solid rgba(var(--color-foreground), 1);

[ScanMe]

Thanks!