Border Comparison
See why semi-transparent borders often look better than solid grey borders on colourful backgrounds.
Background
Border Settings
Alex Harper
Product Designer
Just shipped the new dashboard redesign! The team did an incredible job bringing this together in just two weeks.
border: 2px solid neutral-200
Alex Harper
Product Designer
Just shipped the new dashboard redesign! The team did an incredible job bringing this together in just two weeks.
box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1)
Why This Matters
When placing UI cards on colourful backgrounds, a solid grey border can look out of place because grey is essentially a desaturated colour that doesn't relate to the background.
Using a semi-transparent black border (via box-shadow or rgba) creates a border that's always slightly darker than whatever's behind it. This makes the card feel more naturally integrated with any background colour.
- Grey border: A fixed colour that may clash with vibrant backgrounds
- Semi-transparent black: Adapts to any background, always providing subtle definition
This technique is particularly useful for design systems where components need to work across many different contexts and colour schemes.
/* Grey inner border */
.card {
border: 2px solid #e5e5e5; /* neutral-200 */
background: white;
}/* Semi-transparent outer border */
.card {
box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
background: white;
}
/* Or using inset for inner */
.card-inset {
box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.1);
background: white;
}