Home / Snippets / Color & Theming /

box-sizing reset

The reset you should almost always use: make width/height include padding and borders with border-box—for every element and pseudo-element.

content-box (default)

Padding is added on top of width—easy to overflow.

width: 14rem
padding: 1rem
border: 2px

Box model: content-box

Real width: 14rem + 2rem + 4px

border-box (reset)

Padding and border are included inside the declared width.

width: 14rem
padding: 1rem
border: 2px

Box model: border-box

Real width: 14rem

Widely Supported

colorno-js

Quick implementation

/* Modern box-sizing reset */
*,
*::before,
*::after {
  box-sizing: border-box;
}

Prompt this to your LLM

Includes role, constraints, two framework variants, and edge cases to handle.

You are a senior frontend engineer setting baseline CSS defaults.

Goal: Implement a box-sizing reset that makes sizing predictable across a codebase.

Technical constraints:
- Set box-sizing: border-box on all elements AND pseudo-elements (*::before, *::after).
- Keep it minimal and safe. Explain why border-box is preferred for layouts.
- Provide an optional pattern where html sets border-box and * inherits it.
- Use oklch() for any demo colors; avoid heavy resets beyond box-sizing.

Framework variant (pick one):
A) Vanilla CSS reset snippet.
B) Tailwind/utility-first: show where to place it in a base layer.

Edge cases to handle:
- Third-party widgets that assume content-box.
- Components that rely on content-box for intrinsic sizing (rare).

Return CSS + short explanation.

Why this matters in 2026

Most layout bugs that “shouldn’t happen” are box-model surprises: padding pushing widths beyond their container. A border-box baseline removes that entire class of problems, especially in component systems where padding is common.

The logic

content-box means declared width applies to content only, so padding and borders add extra size. border-box means declared width includes content + padding + border—so the element stays within its intended bounds.

Accessibility & performance

This is a sizing rule only—no user-facing accessibility impact. Performance-wise it’s neutral, but it simplifies maintenance and reduces layout rework when components are composed.