Help changing the border color of color swatches

[questionable313]

Hello, can anyone help me with changing the border color around the color swatches to white? The current theme is Berlin and we are using the dark theme/black background. You can’t see the black color swatches and hard to see other darker colors. I’d like to change this globally; as we have products on the homepage and also the product page itself.

https://questionableteez.com/

I’ve tried adding the following into the custom css section and it didn’t change anything

.color-swatch {
  --swatch-bg: white;
  background-color: var(--swatch-bg);
  width: 100px; /* Adjust the width as needed */
  height: 100px; /* Adjust the height as needed */
  border: 1px solid #000; /* Add a border for better visibility */
  /* Add any other styles you want for your color swatch */
}

I also tried this from someone else’s question and changed the color for ours, still nothing

.swatch input[type="radio"]:checked + label span {
    border: 1px solid white;
}

I also tried using this answer from someone else but couldn’t find that file in the code editor https://community.shopify.com/c/shopify-design/color-swatches/m-p/1844705

Thank you in advance!

[Made4uo-Ribe]

Hi @questionable313

Try this one.

• From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
• Find the theme that you want to edit and click on “Actions” and then “Edit code”.
• In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

.product-form__controls-group input:checked:not(.disabled)+label.color-swatch {
    border-color: white !important;
}

• And Save.
• Result:
• 

[PageFly-Richard]

This is Richard from PageFly - Shopify Page Builder App, I’d like to suggest this idea:
Online Store ->Theme ->Edit code
Assets ->Base.css

.product-form__controls-group input:checked:not(.disabled)+label.color-swatch {
    border-color: #fff !important;
}

Hope you find my answer helpful!
Best regards,
Richard | PageFly

[mt686]

This is a pretty common issue on darker themes like Berlin — the swatch borders blend in, especially if you’re using colors like black, charcoal, navy, etc.

The tricky part is that Berlin doesn’t use the old .color-swatch or .swatch classes you see in a lot of forum answers. It uses a more component-based structure, so your CSS isn’t targeting anything that actually exists in the theme.

What usually works in Berlin is overriding the swatch button element rather than the wrapper. Something like this:

.color-swatch__item {
  border: 2px solid #fff !important;
}

If your theme uses the image-based circles, this works too:

.color-swatch__radio:checked + .color-swatch__label,
.color-swatch__label {
  border: 2px solid #fff !important;
}

Drop those into your global custom CSS area (not just on a single template) and you should see the border go white everywhere — homepage, product page, featured products, etc.

If nothing is changing, it usually means the markup is slightly different or Berlin has changed since the last update. In that case, the easiest method is to inspect the swatch element in your browser inspector and target the exact class name Shopify is outputting.

If you want to avoid editing code at all, my other app Easy Edits basically lets you make small theme tweaks (like swatch borders, spacing, section styles, etc.) without touching CSS. You just make the change during the free trial and keep it forever, so you don’t have to worry about messing with theme files.

If you want, I can check your theme markup real quick and tell you the exact selector you need.

[websensepro]

Hello, @questionable313

1. Go to Online Store → Theme → Edit code.
2. Open your theme.css / base.css file and paste the code in the bottom of the file.

.swatch-element.color {
  border: 1px solid white !important;
}

.swatch-element.color.active {
  outline: 2px solid white !important;
  outline-offset: 2px !important;
}

Thank You!