Color Swatch is rectangular inside a rounded border

Shopify Discussion

Topic summary

A user is experiencing a CSS styling issue where color swatches display as rectangular shapes inside rounded borders, rather than filling the rounded container completely. The problem is particularly visible with non-white colors like orange.

Attempted Solutions:

  • The user has searched for solutions without success
  • Tried applying object-fit: cover; CSS property, but it did not resolve the issue

Current Status:

  • Another participant suggested object-fit: cover; and requested a direct link to the site for more precise troubleshooting
  • The issue remains unresolved and requires additional CSS code or investigation to properly style the color swatches to match their rounded border containers
Summarized with AI on October 30. AI used: claude-sonnet-4-5-20250929.
1

Hello, can someone give me the css code to change the inside color, cause as you can see in the image below, the orange color or any color than white is shown in a rectangular shape inside of a rounded border, I tried to seek everywhere but didn’t find solution, if someone volunteer could help me, I would appreciate it.

chlgr_0-1743699237865.png

1 Like
2

if it’s a picture, add “object-fit: cover;”
Better yet, share the link to answer your question exactly

3

I tried object-fit but it doesn’t work