II · Relationship

Why Are All Containers Bordered?

What goes together

Somebody asked me that once, looking over my shoulder at a layout I was proud of. I think it was my first boss in a design job, who had also been my lecturer, which is maybe why it went in so deep. I don't remember the project. I remember the question.

Why are all the containers bordered?

I looked at the screen the way she was looking at it. The page sat inside a big rounded box with a shadow. Inside that box, sections, each in its own box. Inside the sections, cards, each with a border. Inside some of the cards, more boxes. A border in a border in a border. I had been building layouts the way you pack a shipment: everything in a container, every container inside a bigger one. It looked organized. It looked, to me, designed.

<figure style="margin:1.6rem 0;text-align:center"><svg width="400" height="200" viewBox="0 0 400 200" role="img" aria-label="a page in a rounded shadowed box, sections in boxes, cards with borders, and boxes inside the cards"><rect x="10" y="12" width="382" height="184" rx="14" fill="#eeeae3"/><rect x="8" y="8" width="382" height="184" rx="14" fill="#fff" stroke="#d8d2c8" stroke-width="1"/><rect x="24" y="22" width="80" height="8" rx="4.0" fill="#c9c2b6"/><rect x="24" y="40" width="172" height="140" rx="10" fill="none" stroke="#d8d2c8" stroke-width="1"/><rect x="36" y="52" width="60" height="6" rx="3.0" fill="#e0dad0"/><rect x="36" y="68" width="148" height="46" rx="7" fill="none" stroke="#d8d2c8" stroke-width="1"/><rect x="46" y="78" width="50" height="6" rx="3.0" fill="#c9c2b6"/><rect x="46" y="90" width="60" height="16" rx="4" fill="none" stroke="#d8d2c8" stroke-width="1"/><rect x="112" y="90" width="60" height="16" rx="4" fill="none" stroke="#d8d2c8" stroke-width="1"/><rect x="36" y="122" width="148" height="46" rx="7" fill="none" stroke="#d8d2c8" stroke-width="1"/><rect x="46" y="132" width="50" height="6" rx="3.0" fill="#c9c2b6"/><rect x="46" y="144" width="60" height="16" rx="4" fill="none" stroke="#d8d2c8" stroke-width="1"/><rect x="112" y="144" width="60" height="16" rx="4" fill="none" stroke="#d8d2c8" stroke-width="1"/><rect x="204" y="40" width="172" height="140" rx="10" fill="none" stroke="#d8d2c8" stroke-width="1"/><rect x="216" y="52" width="60" height="6" rx="3.0" fill="#e0dad0"/><rect x="216" y="68" width="148" height="46" rx="7" fill="none" stroke="#d8d2c8" stroke-width="1"/><rect x="226" y="78" width="50" height="6" rx="3.0" fill="#c9c2b6"/><rect x="226" y="90" width="60" height="16" rx="4" fill="none" stroke="#d8d2c8" stroke-width="1"/><rect x="292" y="90" width="60" height="16" rx="4" fill="none" stroke="#d8d2c8" stroke-width="1"/><rect x="216" y="122" width="148" height="46" rx="7" fill="none" stroke="#d8d2c8" stroke-width="1"/><rect x="226" y="132" width="50" height="6" rx="3.0" fill="#c9c2b6"/><rect x="226" y="144" width="60" height="16" rx="4" fill="none" stroke="#d8d2c8" stroke-width="1"/><rect x="292" y="144" width="60" height="16" rx="4" fill="none" stroke="#d8d2c8" stroke-width="1"/></svg><figcaption style="font-size:.8rem;color:#a8a298;font-style:italic;margin-top:.4rem">A border in a border in a border. It looked organized.</figcaption></figure>

She wasn't asking about style. She was asking what the borders were for. I didn't have an answer, because I had never asked. A border was what you did to a thing to make it look like a thing.

Years later I'm the one asking. Every week, to every designer I work with, and these days to the AI I'm teaching my methods to. Why is this in a card? Why is the page in a box? What is this border doing? I've written it down as a rule I can paste, and it still doesn't stick, because the box is the default. Open any design tool, any component library, any dashboard template, and the first thing you're handed is a container to put things in. Nobody decides to wrap a page in a card. They have to decide not to.

Forced grouping

What I'm complaining about isn't boxes.

Every screen is boxes. The page is a box; the sections in it are boxes; the stats in a row are each a box; the label and its field are a box. Thinking in groups and containers is the job. There is no layout without them.

What I'm complaining about is drawing a line around every one of them. A border is the quick, easy way to force a grouping: it's simple, it needs no thought, and it works, in the sense that the reader sees a group. It works for a reason: Palmer (1992) showed that things inside a shared boundary are seen as one group, a cue he called common region. The border isn't decoration. The question is whether it's doing work the layout couldn't. And it doesn't have to be a literal border. A darker background with white cards floating on it is the same move. So is a shadow under every block. It's forced grouping: the grouping is imposed on the content from outside, instead of coming out of the content's nature and how it's arranged. And it has a cost that's easy to miss because it's a cost in quiet. Each forced line is one more mark on the screen that isn't content.

The honest question my lecturer was asking is whether the layout could have said these go together on its own.

Borrowing from print

The place I go to answer that is older than any interface.

Open a newspaper. A broadsheet front page holds eight stories, three photographs, captions, a masthead, a weather strip, pull quotes, page references and advertising, in a space smaller than two laptop screens. Count the boxes. There are almost none. Maybe a hairline between two unrelated stories. And yet you never wonder which caption belongs to which photo, where one story ends and the next begins, or what matters most on the page. You know before you read a word.

Print designers didn't learn this because they were wiser. They learned it because they had to. A page has a fixed size and two sides, and that's it. Nothing scrolls. Nothing expands. If eight stories have to share a front page, somebody has to decide what matters, what sits next to what, and how the eye should move, because there is nowhere for the undecided to go. The limit is a forcing function, and the whole discipline of editorial layout grew inside it. Three tools carry most of the weight:

Space. The caption sits tight under its photo and far from everything else. The gap inside a story is small; the gap before the next story is large. Distance tells the eye what belongs together before the words have been read.

Alignment. Everything in one story shares an edge. Cross to a new edge and you've crossed into something else. A shared edge is a wall you can't see.

Weight. One headline is enormous; the rest step down. The eye goes to the big one first because it is first, and falls down the hierarchy exactly as the editor meant it to. Nobody drew a box around the lead story to say this is the lead story. The size said it.

The screen relaxed the limit. It can scroll, expand and update, so the decisions print forced on the spot can be put off, and a box arrives to cover the decision nobody made. Heck, you could have an animated arrow flashing and pointing at where the user should click next. The box is the same move with better manners.

I want to be careful with this borrowing, though, because it's easy to overdo. The web is not paper, and the point is not to do print design on a screen. Screens scroll, resize, respond, update while you watch, and all of that is power, not a defect. Use the medium properly. What I'm taking from print is narrower: the discipline of deciding the hierarchy as if the page were finite, and then letting the screen do what paper never could.

Harmony, by its absence

Here is what people feel the first time they take the lines off a screen and fix the spacing instead: quiet. The screen didn't lose information. It lost noise. The same content is there and it's suddenly easier to read, because nothing on the page is shouting this is a group at a reader who could already see it was a group. The parts are organizing themselves. You didn't have to.

I'd call that harmony, and I've found I can't define harmony from the positive side. The dictionary tries with words like agreement and pleasing arrangement, which describe the result, not the quality. What I can do, and what anyone can do, is notice its absence. You don't hear a chord that's in tune. You hear the voice that comes in under the song a little off, and you flinch before you know why. It's the same with a page. I can't tell you what a harmonious layout looks like in a way you could follow. I can tell you, instantly, when a layout has a wrong note in it, and so can you, and so can the person using your product, who will never say that border is redundant and will simply feel, slightly, that the screen is louder than it needs to be.

So I don't aim for harmony. You can't aim at it. I take away what jars, and see what's left.

What I do instead

When I'm not sure a border is earning its place, I take it off and leave the hole. No replacement yet. Then I work on what's left: a real gap above and below the group, bigger than the gaps inside it; the edges lined up; the heading clearly heavier than the body; a response when the group is hovered or pressed, so its extent is something you learn by touching it rather than something you're shown. Then I look at it for a while.

Most of the time the border doesn't go back. Sometimes it does, and then I know why it's there, which is the only thing I was after. I'm not saying never draw a box. I'm saying I've stopped drawing one before I've seen the screen without it.

When does the box need its line?

Take the stats row at the top of nearly every dashboard: four numbers, each with a label and a little icon. Conceptually that's five boxes, the row and the four stats. The usual rendering draws all five: a card for each stat, often on a tinted background, sometimes each a different color. Look at that row and ask what the four borders are telling you that the four gaps couldn't. The numbers are big and the labels are small; that's the hierarchy, already. The icons sit beside their numbers; that's the grouping, already. Give each stat the same width and a decent gap and the eye counts four without being told. Drawn with space alone, the row is quieter and reads exactly the same.

<figure style="margin:1.6rem 0;text-align:center"><svg width="400" height="314" viewBox="0 0 400 314" role="img" aria-label="the same row of four stats drawn four ways: bordered cards, white cards on gray, colored tiles, and with space and type weight only"><text x="8" y="16" font-family="Inter, system-ui, sans-serif" font-size="8" font-weight="400" fill="#8f887d" text-anchor="start" font-style="italic">four bordered cards</text><rect x="14" y="24" width="86" height="46" rx="6" fill="none" stroke="#d8d2c8" stroke-width="1"/><circle cx="28" cy="39" r="5" fill="#e0dad0"/><text x="40" y="43" font-family="Inter, system-ui, sans-serif" font-size="8" font-weight="400" fill="#8f887d" text-anchor="start">Orders</text><text x="26" y="62" font-family="Inter, system-ui, sans-serif" font-size="15" font-weight="600" fill="#3a3631" text-anchor="start">128</text><rect x="109" y="24" width="86" height="46" rx="6" fill="none" stroke="#d8d2c8" stroke-width="1"/><circle cx="123" cy="39" r="5" fill="#e0dad0"/><text x="135" y="43" font-family="Inter, system-ui, sans-serif" font-size="8" font-weight="400" fill="#8f887d" text-anchor="start">Open</text><text x="121" y="62" font-family="Inter, system-ui, sans-serif" font-size="15" font-weight="600" fill="#3a3631" text-anchor="start">42</text><rect x="204" y="24" width="86" height="46" rx="6" fill="none" stroke="#d8d2c8" stroke-width="1"/><circle cx="218" cy="39" r="5" fill="#e0dad0"/><text x="230" y="43" font-family="Inter, system-ui, sans-serif" font-size="8" font-weight="400" fill="#8f887d" text-anchor="start">Late</text><text x="216" y="62" font-family="Inter, system-ui, sans-serif" font-size="15" font-weight="600" fill="#3a3631" text-anchor="start">9</text><rect x="299" y="24" width="86" height="46" rx="6" fill="none" stroke="#d8d2c8" stroke-width="1"/><circle cx="313" cy="39" r="5" fill="#e0dad0"/><text x="325" y="43" font-family="Inter, system-ui, sans-serif" font-size="8" font-weight="400" fill="#8f887d" text-anchor="start">Visits</text><text x="311" y="62" font-family="Inter, system-ui, sans-serif" font-size="15" font-weight="600" fill="#3a3631" text-anchor="start">3.4k</text><rect x="0" y="86" width="400" height="72" rx="0" fill="#ece8e1"/><text x="8" y="92" font-family="Inter, system-ui, sans-serif" font-size="8" font-weight="400" fill="#8f887d" text-anchor="start" font-style="italic">four white cards on gray</text><rect x="14" y="100" width="86" height="46" rx="6" fill="#fff"/><circle cx="28" cy="115" r="5" fill="#e0dad0"/><text x="40" y="119" font-family="Inter, system-ui, sans-serif" font-size="8" font-weight="400" fill="#8f887d" text-anchor="start">Orders</text><text x="26" y="138" font-family="Inter, system-ui, sans-serif" font-size="15" font-weight="600" fill="#3a3631" text-anchor="start">128</text><rect x="109" y="100" width="86" height="46" rx="6" fill="#fff"/><circle cx="123" cy="115" r="5" fill="#e0dad0"/><text x="135" y="119" font-family="Inter, system-ui, sans-serif" font-size="8" font-weight="400" fill="#8f887d" text-anchor="start">Open</text><text x="121" y="138" font-family="Inter, system-ui, sans-serif" font-size="15" font-weight="600" fill="#3a3631" text-anchor="start">42</text><rect x="204" y="100" width="86" height="46" rx="6" fill="#fff"/><circle cx="218" cy="115" r="5" fill="#e0dad0"/><text x="230" y="119" font-family="Inter, system-ui, sans-serif" font-size="8" font-weight="400" fill="#8f887d" text-anchor="start">Late</text><text x="216" y="138" font-family="Inter, system-ui, sans-serif" font-size="15" font-weight="600" fill="#3a3631" text-anchor="start">9</text><rect x="299" y="100" width="86" height="46" rx="6" fill="#fff"/><circle cx="313" cy="115" r="5" fill="#e0dad0"/><text x="325" y="119" font-family="Inter, system-ui, sans-serif" font-size="8" font-weight="400" fill="#8f887d" text-anchor="start">Visits</text><text x="311" y="138" font-family="Inter, system-ui, sans-serif" font-size="15" font-weight="600" fill="#3a3631" text-anchor="start">3.4k</text><text x="8" y="174" font-family="Inter, system-ui, sans-serif" font-size="8" font-weight="400" fill="#8f887d" text-anchor="start" font-style="italic">four colored tiles</text><rect x="14" y="182" width="86" height="46" rx="6" fill="#f2e4e1"/><circle cx="28" cy="197" r="5" fill="#e0dad0"/><text x="40" y="201" font-family="Inter, system-ui, sans-serif" font-size="8" font-weight="400" fill="#8f887d" text-anchor="start">Orders</text><text x="26" y="220" font-family="Inter, system-ui, sans-serif" font-size="15" font-weight="600" fill="#3a3631" text-anchor="start">128</text><rect x="109" y="182" width="86" height="46" rx="6" fill="#e4ece3"/><circle cx="123" cy="197" r="5" fill="#e0dad0"/><text x="135" y="201" font-family="Inter, system-ui, sans-serif" font-size="8" font-weight="400" fill="#8f887d" text-anchor="start">Open</text><text x="121" y="220" font-family="Inter, system-ui, sans-serif" font-size="15" font-weight="600" fill="#3a3631" text-anchor="start">42</text><rect x="204" y="182" width="86" height="46" rx="6" fill="#e3e9f0"/><circle cx="218" cy="197" r="5" fill="#e0dad0"/><text x="230" y="201" font-family="Inter, system-ui, sans-serif" font-size="8" font-weight="400" fill="#8f887d" text-anchor="start">Late</text><text x="216" y="220" font-family="Inter, system-ui, sans-serif" font-size="15" font-weight="600" fill="#3a3631" text-anchor="start">9</text><rect x="299" y="182" width="86" height="46" rx="6" fill="#f1eadb"/><circle cx="313" cy="197" r="5" fill="#e0dad0"/><text x="325" y="201" font-family="Inter, system-ui, sans-serif" font-size="8" font-weight="400" fill="#8f887d" text-anchor="start">Visits</text><text x="311" y="220" font-family="Inter, system-ui, sans-serif" font-size="15" font-weight="600" fill="#3a3631" text-anchor="start">3.4k</text><text x="8" y="250" font-family="Inter, system-ui, sans-serif" font-size="8" font-weight="400" fill="#8f887d" text-anchor="start" font-style="italic">space and weight only</text><circle cx="28" cy="273" r="5" fill="#e0dad0"/><text x="40" y="277" font-family="Inter, system-ui, sans-serif" font-size="8" font-weight="400" fill="#8f887d" text-anchor="start">Orders</text><text x="26" y="296" font-family="Inter, system-ui, sans-serif" font-size="15" font-weight="600" fill="#3a3631" text-anchor="start">128</text><circle cx="123" cy="273" r="5" fill="#e0dad0"/><text x="135" y="277" font-family="Inter, system-ui, sans-serif" font-size="8" font-weight="400" fill="#8f887d" text-anchor="start">Open</text><text x="121" y="296" font-family="Inter, system-ui, sans-serif" font-size="15" font-weight="600" fill="#3a3631" text-anchor="start">42</text><circle cx="218" cy="273" r="5" fill="#e0dad0"/><text x="230" y="277" font-family="Inter, system-ui, sans-serif" font-size="8" font-weight="400" fill="#8f887d" text-anchor="start">Late</text><text x="216" y="296" font-family="Inter, system-ui, sans-serif" font-size="15" font-weight="600" fill="#3a3631" text-anchor="start">9</text><circle cx="313" cy="273" r="5" fill="#e0dad0"/><text x="325" y="277" font-family="Inter, system-ui, sans-serif" font-size="8" font-weight="400" fill="#8f887d" text-anchor="start">Visits</text><text x="311" y="296" font-family="Inter, system-ui, sans-serif" font-size="15" font-weight="600" fill="#3a3631" text-anchor="start">3.4k</text></svg><figcaption style="font-size:.8rem;color:#a8a298;font-style:italic;margin-top:.4rem">The same four numbers, four ways. The last one reads the same with nothing drawn around it.</figcaption></figure>

So how important is it, really, to box each stat in a card? Can it work without it? One example of a card that earns its forced grouping: when these are widgets, and the person can drag them around, reorder them, swap the data behind them, remove one. Then the card is an object, and the border isn't labeling a group any more, it's saying you can hold me. That's a contract too, maybe only in my head. But a screen where something looks like it can be picked up and can't, or can and doesn't look it, feels wrong to me in the same way the wrong note does.

Other boxes earn their line the same way, by being something you act on or something on top: a list of items you can open, a modal over the page.

What I won't do is draw the box as a frame, because the bare page felt unfinished. If a page feels unfinished without a box around it, the page is unfinished. Fix the spacing, the alignment, the hierarchy. Don't put the problem in a container and call it done.