Why does n-resize look like ns-resize?

On Windows there is only one vertical resize cursor, so browsers use it for n-resize, s-resize and ns-resize. macOS 15 and later can show the one-way arrow.

When should I use n-resize instead of ns-resize?

When the edge can only move up at that moment, for example a drawer already at its minimum height. Otherwise ns-resize.

What does the n in n-resize mean?

North, the top edge. The single-direction keywords use compass points: n, e, s, w and the four corners.

cursor: n-resize in CSS: drag the top edge up

cursor: n-resize; Move your mouse over this box Cursors only appear with a mouse or trackpad. Open this page on a computer to see this one.

This is the cursor your browser and system draw for n-resize.

What it shows

On macOS 15 and later, Chrome shows a one-way arrow pointing up. On Windows, Chrome, Edge and Firefox show the Vertical Resize double arrow (the SizeNS role, aero_ns.cur), the same as ns-resize and s-resize.

Usage

When to use it

Use it for

The top edge of a bottom sheet or drawer at its smallest size, when it can only grow taller.
Calendar events whose start time you drag earlier.
Any top handle that has hit its limit in one direction, to show the only way it can still go.

Avoid it for

Edges that move both ways. Use ns-resize; on Windows they look the same anyway.
Row borders in tables. That is row-resize.

Code

Copy the snippet

CSS

.sheet-handle { cursor: n-resize; }

HTML

<div class="bottom-sheet">
  <div class="sheet-handle">Drag up for more</div>
</div>

Support

Browsers and systems

Browser support for n-resize
Browser	Support
Chrome	1
Edge	12
Firefox	1
Safari	1.2
Safari on iOS	no
Chrome on Android	18

The matching operating system cursor
System	Matching cursor
Windows role	SizeNS
Windows file	`aero_ns.cur`
macOS	Resize up

Watch out

Gotchas

On Windows, n-resize, s-resize and ns-resize all show the same Vertical Resize double arrow (aero_ns.cur), so the one-way meaning is lost there.
Swap n-resize for ns-resize as soon as the edge can move both ways again.

FAQ

Questions

Why does n-resize look like ns-resize?: On Windows there is only one vertical resize cursor, so browsers use it for n-resize, s-resize and ns-resize. macOS 15 and later can show the one-way arrow.
When should I use n-resize instead of ns-resize?: When the edge can only move up at that moment, for example a drawer already at its minimum height. Otherwise ns-resize.
What does the n in n-resize mean?: North, the top edge. The single-direction keywords use compass points: n, e, s, w and the four corners.

More