Why We Reach for a Border Before a Shadow

Why Do We Reach for a Border Before a Shadow?

Because a shadow is decoration and a border is information. When a user's operating system forces its own colour palette, every shadow on your page is discarded and every border survives. If the only thing separating a card from the page is a shadow, that card stops existing.

This is an opinion piece, and the opinion is that most web design uses depth backwards. Shadows get used to define structure, borders get treated as old fashioned, and the result is a page that falls apart the moment anything changes the rendering context.

We are not against shadows. We use them constantly. We just think they belong on top of a structure that already works without them.

What Is Depth Actually Doing on a Marketing Page?

Answering one question for the reader: is this thing part of the page, or is it a separate object sitting on the page? That is the whole job. Everything else about elevation is style applied after that question is settled.

Get that answer wrong and the page feels muddy in a way people struggle to describe. They say it looks busy, or cluttered, or cheap. Usually what has actually happened is that six things are all claiming to be objects and nothing reads as the background.

The reason this matters more than it used to is that a modern B2B page is mostly cards. Feature cards, logo cards, pricing cards, testimonial cards, stat cards. When everything is a card, the boundaries are doing most of the compositional work, and they deserve more thought than a copied shadow value.

Our starting question on any layout is which elements are surfaces and which are content on a surface. Answer that first and the depth decisions mostly make themselves. Our piece on visual hierarchy covers the layer above this one.

Why Is a Shadow a Weaker Boundary Than a Border?

Because the browser throws it away in forced colours mode and keeps the border. This is not a theory. MDN documents exactly which properties change when a user enables a forced colours mode, such as Windows High Contrast, and the list is specific.

Two properties are "forced to specific values" rather than merely recoloured. MDN lists box-shadow as forced to none, and text-shadow as forced to none. Background images are forced to none as well for values that are not url based.

Borders survive that change. MDN lists border-color among the properties "treated as if they have no author-level values specified," meaning the browser substitutes its own colour. The border still exists, still separates the card from the page, and is now guaranteed to contrast, because the system chose the colour.

That asymmetry is the whole argument. A border in forced colours mode gets stronger. A shadow disappears. And this is not an edge case worth ignoring: MDN lists the forced colours media feature as Baseline "Widely available," available across browsers since September 2022, which means the mode is a normal thing for users to be in.

So our rule is simple. If losing the visual separation would break comprehension, the separation must be a border or a background change, not a shadow.

Does WCAG Require a Border at All?

No, and this is the nuance people miss in both directions. WCAG Success Criterion 1.4.11 Non-text Contrast, at Level AA, requires that user interface components and graphical objects have "a contrast ratio of at least 3:1 against adjacent color(s)." It does not demand a box around everything.

The understanding document is explicit: "this success criterion does not require that controls have a visual boundary indicating the hit area." A boundary becomes necessary only when nothing else reveals that the control is there.

It goes further and gives the test. "If a control has visible content (such as text or a sufficiently contrasting icon), which helps users identify the presence of the control, then a border or other indication of the overall boundary of the hit area is not required."

So a text button with strong label contrast is fine with no border. A ghost button whose only evidence of being a button is a faint outline is not, unless that outline clears 3:1. That is the real failure we find on client sites, and it is usually a light grey border on a white background chosen because it looked subtle in Figma.

The number is worth committing to memory, because 3:1 is much less forgiving than designers expect. Plenty of borders that read as clearly visible on a good monitor in a dark room do not pass.

How Many Elevation Levels Does a Site Need?

Three. Flat, raised, and floating. That is enough to express everything a marketing site does, and more than three means nobody can tell them apart anyway, so the extra levels only add inconsistency.

Flat is the page and anything that belongs to it. Raised is a card or panel: an object on the page, but not above the page in any interactive sense. Floating is genuinely above everything, which in practice means menus, dialogs, and toasts.

Level	What it is for	How to express it
Flat	Page sections, content blocks, dividers	Spacing and a rule line where a separation is needed
Raised	Cards, panels, form groups, pricing tiers	A border or a background shift, with an optional soft shadow
Floating	Dropdowns, dialogs, toasts, sticky bars	A border plus a stronger shadow, because these overlap content

Notice that a shadow never appears alone in that table. Every level that needs to be distinguishable has a non-shadow way of being distinguished, and the shadow is additive.

What Goes Wrong With Shadows in Dark Mode?

They stop working, because a dark shadow on a dark background is invisible. The physical metaphor breaks down: in a dark room you do not see shadows, you see edges catching light.

The usual fix is to invert the thinking rather than the colour. In dark mode, elevation is expressed by making the raised surface lighter than the page, not by putting a darker shadow under it. A card that is a shade lighter than its background reads as raised without any shadow at all.

This is why the border first approach pays off twice. A design where separation comes from borders and surface colour translates to dark mode almost mechanically. A design where separation comes from shadows has to be rethought. Our piece on dark mode web design covers the wider translation problem.

If you do keep shadows in dark mode, they need to be much more opaque and much tighter than the light mode versions. Reusing the same values is the single most common dark mode mistake we see.

Why Do So Many Sites Look Flat and Grey?

Because subtlety got mistaken for restraint. A border at a few percent opacity, a shadow at a very low alpha, and a background a shade off white. Each choice defensible, and together a page where nothing has an edge.

Our honest view is that this is a screenshot aesthetic. Those values look elegant in a design tool at full brightness on a calibrated display. They fall apart on a laptop at 40 percent brightness in an office, which is where your buyer is.

The fix is not heavier design. It is committing to fewer, stronger distinctions. One clear border colour that passes 3:1 where it carries meaning, used consistently, looks more considered than five gradations of nearly invisible grey.

It also makes the palette easier to maintain. A site with one border colour and one surface colour per theme has two decisions to review. A site with a subtle gradient of both has dozens, and they drift. Our piece on building a website colour palette covers how we keep that set small.

When Is a Shadow the Right Answer?

When something genuinely overlaps other content, and the reader needs to understand that it is temporarily on top. A dropdown over a paragraph. A dialog over a page. A toast over a table. In those cases the shadow is communicating overlap, which is real information.

It is also right for pure delight, and we are not precious about that. A slight lift on hover, a soft glow behind a hero image, a raised feel on the primary button. None of those carry meaning, so losing them in forced colours mode costs nothing.

The test we apply is whether the page still makes sense with every shadow deleted. If yes, use as many as the design wants. If no, something structural is being carried by decoration, and that is the thing to fix.

How Do You Keep Depth Consistent Across a Site?

Define the three levels once, name them, and never write a one off shadow value in a component. The inconsistency in most design systems is not a taste problem. It is a copy and paste problem, and it is solved by making the named values easier to reach than a new value.

Put them on a style guide page with real components, not swatches. A shadow on a grey square tells you nothing. The same shadow on a real pricing card next to a real form tells you whether the level is doing its job.

Then review the page in three conditions before you sign it off. Light mode, dark mode, and forced colours mode. The third takes one setting to enable and it is the fastest way to find out which of your boundaries were never really there.

What Would We Change on Your Site First?

Turn on forced colours mode and load your pricing page. If the tiers merge into one field of colour, your card boundaries are shadows, and that is a twenty minute fix with real value.

Then check your quietest border against the 3:1 requirement wherever it is the only signal that a control exists. Ghost buttons and input fields are where this fails, and both are on the path to a conversion.

Neither of those is a redesign. They are the two changes that make an existing design more robust without changing how it looks to most people, which is usually the most valuable kind of work available.

If you want us to review how your site holds up across themes and rendering modes, we are happy to take a look. You can find us at phoenix.studio.