Atelier Theme - Variant Buttons Show Thick Lines When Gap is 0

Shopify Discussion
1

Hey everyone,

I’m using the Atelier theme and ran into a little CSS issue on my product pages. I have my size variant buttons set up in a grid with gap: 0 so the boxes touch each other, but now the borders between them look thicker than 1px.

It seems like the borders of each box are stacking when they connect, so visually the lines look double — not the clean 1px grid I want.

Here’s the CSS I’m using right now:

.variant-option–buttons {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: 0px !important;
}

.variant-option__button-label {
width: 100px !important;
height: 50px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
padding: 0 !important;
box-sizing: border-box !important;
border: 1px solid #000 !important;
}

Does anyone have a smart way to keep all the boxes touching but still have a clean 1px border without it looking doubled?

Thanks so much in advance!

2

Have you tried something like

label.variant-option__button-label {
  border-right: none;
}
3

Hi Tim,

I tried this, and it partially worked. For some products with only one row of sizes, it shows 1px but nothing on the right. For other products that have 2 or 3 rows, it still shows 2px and nothing on the right.

Runway

Screenshot 2026-02-23 at 03.52.29
Screenshot 2026-02-23 at 03.52.291920×1029 113 KB

4

Hey I’ve run into this before, you’re right, the borders are stacking because each button has its own 1px border touching the next one.

An easy fix is to remove one side of the border so they don’t overlap. For example, keep the top and left borders on all buttons, then remove the right border except for the last column and the bottom border except for the last row.

5

Try to undo the previously suggested code and rather use this:

.variant-option__button-label {
  flex: 0 0 25%;
  margin: 0 -1px -1px 0;
}

.variant-option {
  display: flex !important;
}

This will make your buttons overlap borders.
Before/After:

Screenshot 2026-02-23 at 8.44.36 PM
Screenshot 2026-02-23 at 8.44.36 PM1591×451 21.7 KB

Screenshot 2026-02-23 at 8.44.44 PM
Screenshot 2026-02-23 at 8.44.44 PM1591×451 34.6 KB

6

Hi Tim, tried this and didn’t work. It created gaps between the variants.

This the current css that works to close the gap and fix height and width for the grid-boxs:

.variant-option–buttons {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: 0 !important;
}

.variant-option {
margin: 0 !important;
padding: 0 !important;
}

.variant-option__button-label {
width: 100% !important;
height: 50px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
padding: 0 !important;
margin: 0 !important;
box-sizing: border-box !important;
}

Each button has a 1px border, and when they touch each other (since gap: 0), the borders stack and visually appear as 2px thick lines between buttons?

I just need help

7

How do you think I’ve got those screenshots if it does not work?

It may fail you be because I suggest the solution; you change your codes for three days and then, all of a sudden the solution does not work because of those newly-added codes.

Even though, it still can work if you add !important to the margin value or undo margin rule in your code…