Is s-resize different from ns-resize?

In meaning, yes: s-resize says the bottom edge only moves down. On Windows they look identical; macOS 15 and later can show a one-way arrow.

What should a calendar event's bottom handle use?

ns-resize if the end time can move both ways, which is usual. s-resize only when it can no longer get shorter.

Resize and scroll

cursor: s-resize in CSS: drag the bottom edge down

s-resize marks a bottom (south) edge that can be dragged down. Use it when that edge can only move one way right now.

cursor: s-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 s-resize.

What it shows

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

Usage

When to use it

Use it for

The bottom edge of a dropdown panel or top drawer at its smallest, when it can only grow down.
Calendar events whose end time you drag later.
The bottom handle of a box that has reached its minimum height.

Avoid it for

Corner grips like the one on a textarea. That is se-resize.
Edges that move both ways. Use ns-resize.

Code

Copy the snippet

CSS

.event-end { cursor: s-resize; }

HTML

<div class="event">
  Design review<div class="event-end" aria-label="Drag to change end time"></div>
</div>

Support

Browsers and systems

Browser support for s-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 down

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.
Make bottom handles at least 8 px tall even if you only draw a thin line.

FAQ

Questions

Is s-resize different from ns-resize?: In meaning, yes: s-resize says the bottom edge only moves down. On Windows they look identical; macOS 15 and later can show a one-way arrow.
What should a calendar event's bottom handle use?: ns-resize if the end time can move both ways, which is usual. s-resize only when it can no longer get shorter.
What does the s in s-resize mean?: South, the bottom edge.