When does the browser show sw-resize on its own?

Chrome shows it over the resize grip of an element with resize: both when the scrollbar sits on the left, which happens on right-to-left pages.

Which Windows cursor is sw-resize?

Diagonal Resize 2, stored as SizeNESW (aero_nesw.cur).

What does sw stand for?

South-west: the bottom-left corner.

cursor: sw-resize in CSS: the bottom-left corner

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

What it shows

On macOS 15 and later, Chrome shows a one-way diagonal arrow. On Windows, browsers show Diagonal Resize 2 (the SizeNESW role, aero_nesw.cur), the same as nesw-resize and ne-resize.

Usage

When to use it

Use it for

The bottom-left handle of a crop or selection box.
Resize grips in right-to-left layouts, where the grip sits in the bottom-left corner.
A panel docked to the top-right that grows down and to the left.

Avoid it for

Corners that move both ways. Use nesw-resize.
Left-to-right pages' main resize grip. That is se-resize.

Code

Copy the snippet

CSS

[dir="rtl"] .tile-grip { cursor: sw-resize; }

HTML

<div class="tile" dir="rtl">
  Bottom-left grip<span class="tile-grip" aria-label="Drag to resize"></span>
</div>

Support

Browsers and systems

Browser support for sw-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	SizeNESW
Windows file	`aero_nesw.cur`
macOS	Frame resize, bottom-left corner

Watch out

Gotchas

On Windows, ne-resize, sw-resize and nesw-resize all show the same Diagonal Resize 2 double arrow (aero_nesw.cur), so the one-way meaning is lost there.
Mirror your grips for right-to-left pages: the grip moves to the bottom-left, and so should the cursor.

FAQ

Questions

When does the browser show sw-resize on its own?: Chrome shows it over the resize grip of an element with resize: both when the scrollbar sits on the left, which happens on right-to-left pages.
Which Windows cursor is sw-resize?: Diagonal Resize 2, stored as SizeNESW (aero_nesw.cur).
What does sw stand for?: South-west: the bottom-left corner.

More