# Purpose of the `::-moz-focus-inner` Rules in normalize.css: Firefox Focus Normalization

> Learn how normalize.css uses ::-moz-focus-inner to remove Firefox proprietary focus borders and padding on buttons and inputs for consistent cross-browser design.

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

---

**The `::-moz-focus-inner` rules in normalize.css eliminate Firefox's proprietary inner focus border and padding from buttons and form inputs, ensuring consistent cross-browser rendering and a predictable box model.**

The [`necolas/normalize.css`](https://github.com/necolas/normalize.css/blob/main/necolas/normalize.css) repository provides a modern, HTML5-ready CSS reset that preserves useful browser defaults while removing rendering inconsistencies. Understanding the purpose of the `::-moz-focus-inner` rules in normalize.css is essential for developers who need to maintain visual parity across browsers without unexpected layout shifts from Firefox-specific focus styling.

## What Is `::-moz-focus-inner`?

### Firefox's Anonymous Focus Element

Firefox (Gecko) creates an inner **anonymous element** for native `<button>` elements and input elements of type `button`, `reset`, and `submit`. When these controls receive focus, Gecko automatically applies internal **border** and **padding** properties to this pseudo-element. This implementation causes two specific problems:

- **Content shifting**: The inner padding pushes button content slightly from its unfocused position.
- **Box model inconsistencies**: The additional border alters the effective dimensions of the element, breaking layouts designed for consistent sizing across browsers.

Other rendering engines—such as Blink (Chrome/Edge) and WebKit (Safari)—do not implement this inner focus element, making this normalization necessary for cross-browser consistency.

## The Implementation in normalize.css

According to the source code in the [`necolas/normalize.css`](https://github.com/necolas/normalize.css/blob/main/necolas/normalize.css) repository at [`normalize.css`](https://github.com/necolas/normalize.css/blob/main/normalize.css) lines 206-210, the stylesheet specifically targets this Mozilla-only pseudo-element to strip the default styling:

```css
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

```

This rule explicitly sets `border-style: none` to eliminate the inner focus border and `padding: 0` to remove the internal spacing, preventing the unwanted visual offset that occurs exclusively in Firefox.

## Why This Normalization Matters

### Cross-Browser Visual Parity

Chrome, Safari, and Edge render button focus states by applying outlines or borders directly to the element box. Without the `::-moz-focus-inner` normalization, Firefox buttons would display an additional inner border that creates visual discrepancies and makes pixel-perfect layouts impossible to achieve across all browsers.

### Predictable Box Model

The inner padding and border added by Gecko's default stylesheet alter the **computed dimensions** of focused buttons. By removing these properties in [`normalize.css`](https://github.com/necolas/normalize.css/blob/main/normalize.css), developers can rely on consistent `width`, `height`, and content positioning regardless of whether the element has focus or which browser renders it.

### Foundation for Custom Focus Styles

After clearing the native inner focus styling, [`normalize.css`](https://github.com/necolas/normalize.css/blob/main/normalize.css) restores accessible focus indicators using the `:-moz-focusring` pseudo-class at lines 218-222. This approach creates a clean foundation for developers to implement custom focus styles—such as outline rings or box-shadow effects—without interference from Firefox's default inner border artifacts.

## Practical Code Examples

### Basic Usage

To apply this normalization in your project, include the stylesheet in your HTML head:

```html
<link rel="stylesheet" href="https://unpkg.com/normalize.css/normalize.css">

```

Once loaded, all `<button>` elements and submit inputs will render without the inner focus border in Firefox, matching the appearance in other modern browsers.

### Implementing Custom Focus States

With the default inner border removed by [`normalize.css`](https://github.com/necolas/normalize.css/blob/main/normalize.css), you can style focus states consistently across all browsers:

```css
button:focus,
[type="button"]:focus,
[type="reset"]:focus,
[type="submit"]:focus {
  outline: 2px solid #0066ff;
  outline-offset: 2px;
}

```

Because the `::-moz-focus-inner` rules already cleared the native Firefox styling, this custom outline appears cleanly without competing against extra internal padding or borders.

### Restoring Firefox Defaults

In rare cases where you require the original Firefox behavior—such as when matching legacy system UI patterns—override the normalization:

```css
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border: initial;
  padding: initial;
}

```

**Note:** Overriding these rules is generally discouraged unless you have a specific requirement to maintain Firefox's native widget appearance.

## Summary

- The `::-moz-focus-inner` rules in [`normalize.css`](https://github.com/necolas/normalize.css/blob/main/normalize.css) (lines 206-210) remove Firefox's default inner focus border and padding from buttons and form inputs.
- This normalization ensures **cross-browser visual parity** by eliminating a Gecko-specific rendering quirk not present in Chrome, Safari, or Edge.
- Developers gain a **predictable box model** where button dimensions remain consistent regardless of focus state or browser engine.
- The rules work in conjunction with `:-moz-focusring` (lines 218-222) to provide an accessible, clean foundation for implementing custom focus indicators.

## Frequently Asked Questions

### What does `::-moz-focus-inner` actually target?

The `::-moz-focus-inner` pseudo-element targets an anonymous inner element that Firefox (Gecko) generates within native buttons and input elements of type `button`, `reset`, and `submit`. This internal element receives default border and padding properties when the parent control gains focus, creating a visual effect not replicated in other browsers.

### Why does Firefox add an inner focus border?

Firefox adds the inner focus border as part of its native widget styling to provide a visual indication of keyboard focus. However, this implementation detail—applied to an anonymous inner element—differs from other browsers that apply focus indicators directly to the element's outer box, necessitating normalization for consistent cross-browser design.

### Will removing these styles break keyboard accessibility?

No. The [`normalize.css`](https://github.com/necolas/normalize.css/blob/main/normalize.css) source code maintains accessibility by restoring focus indicators through the `:-moz-focusring` pseudo-class at lines 218-222 after removing the inner border. This ensures Firefox users still receive clear focus feedback while allowing developers to implement consistent, accessible custom focus styles without fighting against proprietary default styling.

### Where exactly are these rules located in the repository?

The `::-moz-focus-inner` normalization rules are located in the [`normalize.css`](https://github.com/necolas/normalize.css/blob/main/normalize.css) file at lines 206-210 within the [`necolas/normalize.css`](https://github.com/necolas/normalize.css/blob/main/necolas/normalize.css) repository. The complementary focus restoration rules using `:-moz-focusring` appear immediately after at lines 218-222 in the same file.