When should I use w-resize?

On a left edge that can only move left right now, such as a right-hand panel at its minimum width.

Does w-resize look different from ew-resize?

Not on Windows, where both use Horizontal Resize. macOS 15 and later can show a one-way arrow in Chrome.

Resize and scroll

cursor: w-resize in CSS: drag the left edge outward

w-resize marks a left (west) edge that can be dragged to the left. Use it when that edge can only move one way right now.

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

What it shows

On macOS 15 and later, Chrome shows a one-way arrow pointing left. On Windows, browsers show the Horizontal Resize double arrow (the SizeWE role, aero_ew.cur), the same as ew-resize and e-resize.

Usage

When to use it

Use it for

The left edge of a right-hand inspector or chat panel at its minimum width, when it can only grow.
The start handle of a range slider or a timeline clip.
The left handle of a crop or selection box.

Avoid it for

Splitters between panes. That is col-resize.
Edges that move both ways. Use ew-resize.

Code

Copy the snippet

CSS

.inspector-edge { cursor: w-resize; }

HTML

<aside class="inspector">
  <div class="inspector-edge" aria-label="Drag to widen"></div>Properties
</aside>

Support

Browsers and systems

Browser support for w-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	SizeWE
Windows file	`aero_ew.cur`
macOS	Resize left

Watch out

Gotchas

On Windows, e-resize, w-resize and ew-resize all show the same Horizontal Resize double arrow (aero_ew.cur), so the one-way meaning is lost there.
The keyword names a physical edge. It does not flip in right-to-left layouts, so set it per edge.

FAQ

Questions

When should I use w-resize?: On a left edge that can only move left right now, such as a right-hand panel at its minimum width.
Does w-resize look different from ew-resize?: Not on Windows, where both use Horizontal Resize. macOS 15 and later can show a one-way arrow in Chrome.
What does the w in w-resize mean?: West, the left edge.