Remove border around variant swatch that is "white"

[Christa_Michel]

Looking for css code to add to by store theme to remove the boarder that shows up on just the white variant in the prestige theme. Site is blomus.us

You can see it on this page: Soap Dispenser - SONO

[Christa_Michel]

All I did to fix it was put the code below but I am not sure if it messes with other functions on the site.

.border {
border-width: 0px;
border-color: rgb(var(–border-color));
}

[Core_FitFusion]

that CSS you added will indeed remove the border, but it also targets every element using the .border class across your site (not just the color swatch). That means it could unintentionally affect product cards, buttons, or other components using that same class.

A safer fix is to make the CSS more specific so it only applies to the white color swatches for example:

.color-swatch--white,
.color-swatch--#ffffff {
  border: none !important;
  box-shadow: none !important;
}

That keeps your global borders intact while cleaning up the issue on the product grid.

If you want I can help check your theme’s structure and make sure no other components are affected.

[devcoders]

Hi @Christa_Michel

[tim_1]

This selector is too broad. Another problem with this is that when “White” is selected, it does not show. I’d rather use this:

.color-swatch.border {
  border-width: 0;
}
:checked + .color-swatch.border {
  border-width: 1px;
}

This will remove border on a swatch, but will restore it when it’s selected.