The Case for 0px Border Radius

Every time I share a screenshot of this site, someone comments on the sharp corners. “Did you forget to round those?” No. It’s intentional. Here’s why.

The default assumption is rounded

The web defaulted to rounded corners sometime around 2010 and never looked back. iOS 7 rounded everything. Material Design rounded everything. Bootstrap, Tailwind, every component library — all default to border-radius: 4px or higher.

This isn’t bad design. Rounded corners reduce perceived aggression, soften interfaces, and create a sense of approachability. For consumer apps, that’s often exactly right.

But defaults become invisible. When every card, button, and input is rounded, roundedness stops carrying meaning. It’s just what things look like.

Sharpness as signal

Sharp corners communicate something. Precision. Structure. A lack of apology. They say: “this interface knows what it is.”

You see it in editorial design — newspaper layouts, technical documentation, financial data terminals. The content is the content; the chrome doesn’t soften it.

For a developer’s personal site, I want the container to match the content. Technical writing is precise. Code is unambiguous. The UI should reflect that.

Enforcing 0px in CSS

The interesting part is enforcement. With Tailwind v4, I define the token:

@theme {
  --radius: 0px;
  --radius-sm: 0px;
  --radius-md: 0px;
  --radius-lg: 0px;
  --radius-full: 0px;
}

And add a global reset:

@layer base {
  * {
    border-radius: 0 !important;
  }
}

The !important is doing real work here. Third-party components, browser defaults, and accidentally-applied Tailwind utilities — all overridden. The brand rule is enforced at the CSS level, not at the component level where it would need to be repeated everywhere.

What about interactive states?

Focus rings are the one place I considered breaking the rule. The browser default focus ring is usually rectangular anyway, so this wasn’t a real tension. I use:

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

Sharp, visible, consistent. No radius needed.

The cost

Sharp corners look wrong on one thing: the availability pulse dot. CSS border-radius: 50% is how you make a circle. Since my global rule nukes that, I apply border-radius: 50% as an inline style on the dot elements — inline styles win over !important stylesheets.

<span
  style="background-color: var(--color-success); border-radius: 50%;"
  class="pulse-dot inline-block h-2 w-2"
></span>

One exception to a rule you chose intentionally is fine. It’s breaking a rule you didn’t choose that’s the problem.