Smallest whole-pixel size 7 × 3.
In CSS: aspect-ratio: 21 / 9. Rotated it becomes 9:21.
Where 21:9 is used
Ultrawide gaming and productivity monitors — 2560×1080 and 3440×1440.
A marketing name rather than a true ratio: 3440×1440 is actually 43:18. It approximates cinema scope on a desktop panel.
Rendered live with aspect-ratio: 21 / 9.
21:9 resolutions
Every size below is exactly 21:9 — no rounding. Sizes marked as a standard are named display resolutions.
| Resolution | Width | Height | Megapixels | Standard |
|---|---|---|---|---|
| 161 × 69 | 161 | 69 | 0.01 | — |
| 168 × 72 | 168 | 72 | 0.01 | — |
| 175 × 75 | 175 | 75 | 0.01 | — |
| 182 × 78 | 182 | 78 | 0.01 | — |
| 189 × 81 | 189 | 81 | 0.02 | — |
| 196 × 84 | 196 | 84 | 0.02 | — |
| 203 × 87 | 203 | 87 | 0.02 | — |
| 210 × 90 | 210 | 90 | 0.02 | — |
| 217 × 93 | 217 | 93 | 0.02 | — |
| 224 × 96 | 224 | 96 | 0.02 | — |
| 231 × 99 | 231 | 99 | 0.02 | — |
| 238 × 102 | 238 | 102 | 0.02 | — |
| 245 × 105 | 245 | 105 | 0.03 | — |
| 252 × 108 | 252 | 108 | 0.03 | — |
| 259 × 111 | 259 | 111 | 0.03 | — |
| 266 × 114 | 266 | 114 | 0.03 | — |
| 273 × 117 | 273 | 117 | 0.03 | — |
| 280 × 120 | 280 | 120 | 0.03 | — |
| 287 × 123 | 287 | 123 | 0.04 | — |
| 294 × 126 | 294 | 126 | 0.04 | — |
| 301 × 129 | 301 | 129 | 0.04 | — |
| 308 × 132 | 308 | 132 | 0.04 | — |
| 315 × 135 | 315 | 135 | 0.04 | — |
| 322 × 138 | 322 | 138 | 0.04 | — |
| 329 × 141 | 329 | 141 | 0.05 | — |
| 336 × 144 | 336 | 144 | 0.05 | — |
| 343 × 147 | 343 | 147 | 0.05 | — |
| 350 × 150 | 350 | 150 | 0.05 | — |
| 357 × 153 | 357 | 153 | 0.05 | — |
| 364 × 156 | 364 | 156 | 0.06 | — |
| 371 × 159 | 371 | 159 | 0.06 | — |
| 378 × 162 | 378 | 162 | 0.06 | — |
| 385 × 165 | 385 | 165 | 0.06 | — |
| 392 × 168 | 392 | 168 | 0.07 | — |
| 399 × 171 | 399 | 171 | 0.07 | — |
| 406 × 174 | 406 | 174 | 0.07 | — |
| 413 × 177 | 413 | 177 | 0.07 | — |
| 420 × 180 | 420 | 180 | 0.08 | — |
Using 21:9 in CSS
/* Modern — one line */
.box { aspect-ratio: 21 / 9; }
/* With a fixed width */
.box { width: 100%; max-width: 280px; aspect-ratio: 21 / 9; }
/* Legacy padding-top hack, if you still need it */
.box-legacy { position: relative; }
.box-legacy::before { content: ""; display: block; padding-top: 42.8571%; }
.box-legacy > * { position: absolute; inset: 0; }Questions about 21:9
What resolution is 21:9?
21:9 is a ratio, not a fixed resolution — any size where width ÷ height equals 2.3333 qualifies. The smallest whole-pixel pair is 7 × 3, and common ones include .
What is 21:9 used for?
Ultrawide gaming and productivity monitors — 2560×1080 and 3440×1440.
How do I set 21:9 in CSS?
Use the aspect-ratio property: aspect-ratio: 21 / 9;. The element then keeps that shape at any width. It is supported in every current browser.
What is 21:9 the other way round?
Rotated to portrait it becomes 9:21 — the same shape, turned 90 degrees.
How do I calculate a 21:9 height from a width?
Multiply the width by 0.428571. For example width × ratio = height. The calculator does it both directions.