Resize and scroll
cursor: nw-resize in CSS: the top-left corner
nw-resize marks a top-left (north-west) corner that can be dragged up and to the left.
cursor: nw-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. What it shows
On macOS 15 and later, Chrome shows a one-way diagonal arrow. On Windows, browsers show Diagonal Resize 1 (the SizeNWSE role, aero_nwse.cur), the same as nwse-resize and se-resize.
Usage
When to use it
Use it for
- The top-left handle of a crop box or selection.
- A widget docked to the bottom-right of the screen that grows from its top-left corner.
- Image frames in an editor when the corner has reached its smallest size and can only grow.
Avoid it for
- Corners that move both ways. Use nwse-resize.
- The bottom-right grip of a window or textarea. That is se-resize.
Code
Copy the snippet
.dock-corner { cursor: nw-resize; }<div class="chat-dock">
<span class="dock-corner" aria-label="Drag to enlarge"></span>Chat
</div>Support
Browsers and systems
| Browser | Support |
|---|---|
| Chrome | 1 |
| Edge | 12 |
| Firefox | 1 |
| Safari | 1.2 |
| Safari on iOS | no |
| Chrome on Android | 18 |
| System | Matching cursor |
|---|---|
| Windows role | SizeNWSE |
| Windows file | aero_nwse.cur |
| macOS | Frame resize, top-left corner |
Watch out
Gotchas
- On Windows, nw-resize, se-resize and nwse-resize all show the same Diagonal Resize 1 double arrow (aero_nwse.cur), so the one-way meaning is lost there.
- Give corner handles at least 16 by 16 px of hit area, even if the visible square is smaller.
FAQ
Questions
- Which Windows cursor is nw-resize?
- Diagonal Resize 1, stored as SizeNWSE (aero_nwse.cur). The same cursor serves se-resize and nwse-resize.
- Where would I use a top-left resize handle?
- On panels docked to the bottom-right of the screen, such as a chat widget, which can only grow up and to the left.
- What does nw stand for?
- North-west: the top-left corner.
More