crisp-edges

Limited supportUseful when crisp-edges helps structure space, flow, or sizing without relying on brittle manual adjustments.

Overview

The image-rendering: crisp-edges CSS declaration scales images to preserve lines without blurring.

Feature	Desktop				Mobile
Feature	Chrome	Edge	Firefox	Safari	Chrome Android	Safari iOS
`css.properties.image-rendering.crisp-edges`	13	79	65	7	18	7

1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)

CSS

.pixel-art {
  image-rendering: crisp-edges;
  image-rendering: -webkit-optimize-contrast;
  width: 256px;
  height: 256px;
}

CSS Crisp-edges demo.

CSS Pixelated demo.

CSS Auto (default) demo.

Component layout
Use crisp-edges to create more predictable spacing and placement inside reusable UI patterns.
Responsive structure
Adapt containers and flow rules so layouts stay stable across viewport changes.

Test layout rules with real content, long labels, and small screens before depending on them broadly.
Prefer simpler layout primitives if they already solve the problem clearly.