Which corners use nwse-resize?

Top-left and bottom-right. The other two corners use nesw-resize.

What is it called in Windows?

Diagonal Resize 1, stored as SizeNWSE (aero_nwse.cur).

Should a window's bottom-right grip use se-resize or nwse-resize?

nwse-resize if the window can shrink as well as grow, which is the usual case.

Resize and scroll

cursor: nwse-resize in CSS: diagonal resize, top-left

nwse-resize is the diagonal double arrow running from top-left to bottom-right. It is the usual cursor for a bottom-right grip that can go both ways.

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

What it shows

Windows draws Diagonal Resize 1 (the SizeNWSE role, aero_nwse.cur). macOS shows a diagonal resize arrow.

Usage

When to use it

Use it for

Top-left and bottom-right corner handles of boxes that resize both ways.
The bottom-right grip of custom windows, dialogs and cards.
Image and video frames you scale by dragging a corner.

Avoid it for

Top-right and bottom-left corners. Those use nesw-resize.
Native textarea grips. The browser picks the cursor there.

Code

Copy the snippet

CSS

.handle.tl,
.handle.br { cursor: nwse-resize; }

HTML

<div class="selection">
  <span class="handle tl" aria-label="Top-left handle"></span><span class="handle br" aria-label="Bottom-right handle"></span>
</div>

Support

Browsers and systems

Browser support for nwse-resize
Browser	Support
Chrome	1
Edge	12
Firefox	1.5
Safari	3
Safari on iOS	no
Chrome on Android	18

The matching operating system cursor
System	Matching cursor
Windows role	SizeNWSE
Windows file	`aero_nwse.cur`
macOS	Diagonal resize, top-left to bottom-right

Watch out

Gotchas

Read the name as the line from north-west to south-east to keep it apart from nesw-resize.
On Windows, nw-resize, se-resize and nwse-resize all show the same cursor.

Free cursors

A custom nwse-resize cursor

The same cursor from each of our packs, free under CC0. Move your mouse over one to try it, or open it for the .cur file, the PNG and the CSS.

FAQ

Questions

Which corners use nwse-resize?: Top-left and bottom-right. The other two corners use nesw-resize.
What is it called in Windows?: Diagonal Resize 1, stored as SizeNWSE (aero_nwse.cur).
Should a window's bottom-right grip use se-resize or nwse-resize?: nwse-resize if the window can shrink as well as grow, which is the usual case.