# When Does normalize.css Apply `box-sizing: border-box` to Form Elements?

> Discover when normalize.css applies box-sizing border-box to form elements. Learn about the specific elements targeted and the reasons behind this CSS rule.

- Repository: [Nicolas Gallagher/normalize.css](https://github.com/necolas/normalize.css)
- Tags: deep-dive
- Published: 2026-03-07

---

**[`normalize.css`](https://github.com/necolas/normalize.css/blob/main/normalize.css) applies `box-sizing: border-box` exclusively to `<legend>` elements and checkbox/radio `<input>` types to correct legacy Internet Explorer and Edge rendering bugs, leaving all other form controls untouched.**

The [`normalize.css`](https://github.com/necolas/normalize.css/blob/main/normalize.css) library maintains a surgical approach to cross-browser styling, modifying defaults only where specific browser inconsistencies exist. When examining how this popular CSS reset handles the box model for form elements, the source code reveals a targeted strategy that addresses historical layout bugs without imposing opinionated design choices. According to the necolas/normalize.css repository, only two specific categories of form-related elements receive the `border-box` treatment.

## Which Form Elements Receive `border-box`

Unlike comprehensive CSS resets that apply `box-sizing: border-box` universally using the `*` selector, [`normalize.css`](https://github.com/necolas/normalize.css/blob/main/normalize.css) limits this property to elements with documented layout bugs in older browsers. The rules appear in the main [`normalize.css`](https://github.com/necolas/normalize.css/blob/main/normalize.css) file at the root of the repository with specific comments explaining each browser fix.

### `legend` Elements

At **line 241** of [`normalize.css`](https://github.com/necolas/normalize.css/blob/main/normalize.css), the stylesheet forces `box-sizing: border-box` on the `<legend>` element:

```css
legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

```

The inline comment references **"Correct the text wrapping in Edge and IE."** Without this rule, Internet Explorer and legacy Edge versions calculate the legend's width using the `content-box` model, causing text to overflow unexpectedly when padding or borders are present.

### Checkbox and Radio Inputs

At **line 272**, [`normalize.css`](https://github.com/necolas/normalize.css/blob/main/normalize.css) targets input types specifically vulnerable to box model inconsistencies in IE 10:

```css
[type="checkbox"],
[type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

```

The comment **"Add the correct box sizing in IE 10"** indicates that these input types historically rendered with `content-box` sizing in Internet Explorer, breaking layouts when developers applied custom dimensions. This rule ensures that padding and borders count toward the total width calculation, matching modern browser behavior.

## Why Other Form Controls Keep `content-box`

[`normalize.css`](https://github.com/necolas/normalize.css/blob/main/normalize.css) deliberately avoids applying `box-sizing: border-box` to other form elements such as `<button>`, `<select>`, `<textarea>`, and text-based `<input>` fields. These elements do not suffer from the same cross-browser box model bugs that plagued checkboxes, radios, and legends in legacy Internet Explorer.

The library's philosophy centers on **normalization** rather than **resetting**. By preserving the default `content-box` model for most inputs, the stylesheet allows developers to opt into `border-box` sizing through their own CSS architecture without fighting against Normalize's baseline styles. This minimal intrusion respects developer intent while providing a consistent foundation across browsers.

## Practical Implementation Examples

Understanding these specific targets helps developers predict layout behavior when integrating [`normalize.css`](https://github.com/necolas/normalize.css/blob/main/normalize.css) into their projects.

### Checkbox Sizing Fix

Without the normalization rule, checkbox inputs exhibit inconsistent sizing in legacy IE:

```html
<style>
  .custom-checkbox {
    width: 20px;
    height: 20px;
    padding: 2px;
    border: 2px solid #333;
  }
</style>

<input type="checkbox" class="custom-checkbox">

```

In IE 10, this element would render at 28px wide (20px content + 4px padding + 4px border) rather than the expected 20px, because the browser uses `content-box` sizing by default. The [`normalize.css`](https://github.com/necolas/normalize.css/blob/main/normalize.css) rule at line 272 corrects this calculation.

### Legend Text Wrapping

The legend fix prevents layout breakage in fieldsets:

```html
<fieldset style="width: 300px;">
  <legend style="padding: 10px; border: 1px solid #000;">
    Form Section Title
  </legend>
</fieldset>

```

Without [`normalize.css`](https://github.com/necolas/normalize.css/blob/main/normalize.css), Internet Explorer and Edge expand the legend beyond the 300px fieldset width. The `border-box` declaration at line 241 forces the padding and border inside the available space, matching behavior in Chrome and Firefox.

## Summary

- **[`normalize.css`](https://github.com/necolas/normalize.css/blob/main/normalize.css) applies `box-sizing: border-box` to only two form-related categories**: `<legend>` elements and checkbox/radio inputs.
- **File locations**: Line 241 addresses legend text wrapping in Edge/IE, while line 272 fixes checkbox/radio sizing in IE 10.
- **Other form elements** such as buttons, select menus, and text inputs retain their default `content-box` sizing.
- **The conservative approach** preserves developer control while fixing specific legacy browser bugs that cause layout inconsistencies.

## Frequently Asked Questions

### Does normalize.css apply `box-sizing: border-box` to all input elements?

No. The library specifically targets only `[type="checkbox"]` and `[type="radio"]` inputs at line 272 of [`normalize.css`](https://github.com/necolas/normalize.css/blob/main/normalize.css). Text inputs, password fields, and other input types maintain their default box model to avoid overriding developer styling preferences.

### Why doesn't normalize.css use the universal `*` selector for box-sizing?

Using `* { box-sizing: border-box; }` would constitute an opinionated design choice rather than a normalization fix. The necolas/normalize.css project aims to correct browser bugs, not impose architectural decisions. Developers who want universal `border-box` sizing can add that rule separately in their own stylesheets.

### What IE versions require the checkbox and radio box-sizing fix?

The comment at line 272 specifically references **IE 10**, where these input types incorrectly rendered using `content-box` calculations. While modern browsers handle these elements consistently, the rule remains in [`normalize.css`](https://github.com/necolas/normalize.css/blob/main/normalize.css) to support legacy environments and ensure predictable dimensions when borders or padding are applied.

### Does the `legend` rule affect modern browsers like Chrome and Firefox?

The `box-sizing: border-box` declaration on `legend` elements primarily corrects behavior in **Internet Explorer and legacy Edge** (pre-Chromium). Modern browsers already handle legend width calculations correctly, but the rule causes no harm in these environments and ensures cross-browser consistency when padding is present.