Resize and scroll
cursor: nesw-resize in CSS: diagonal resize, top-right
nesw-resize is the diagonal double arrow running from top-right to bottom-left. Use it on those two corners when they can move both ways.
cursor: nesw-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
Windows draws Diagonal Resize 2 (the SizeNESW role, aero_nesw.cur). macOS shows a diagonal resize arrow.
Usage
When to use it
Use it for
- Top-right and bottom-left corner handles of boxes that grow or shrink from that corner.
- Diagonal handles in croppers and image editors.
- Pair it with nwse-resize on the other two corners so every corner of a selection box looks right.
Avoid it for
- The bottom-right grip of a window. That corner is nwse-resize.
- Corners that can only grow one way. ne-resize or sw-resize say that.
Code
Copy the snippet
.handle.tr,
.handle.bl { cursor: nesw-resize; }<div class="selection">
<span class="handle tr" aria-label="Top-right handle"></span><span class="handle bl" aria-label="Bottom-left handle"></span>
</div>Support
Browsers and systems
| Browser | Support |
|---|---|
| Chrome | 1 |
| Edge | 12 |
| Firefox | 1.5 |
| Safari | 3 |
| Safari on iOS | no |
| Chrome on Android | 18 |
| System | Matching cursor |
|---|---|
| Windows role | SizeNESW |
| Windows file | aero_nesw.cur |
| macOS | Diagonal resize, top-right to bottom-left |
Watch out
Gotchas
- Easy to mix up with nwse-resize. Read it as the line from north-east to south-west.
- Corner handles need at least 16 by 16 px of hit area.
Free cursors
A custom nesw-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 nesw-resize?
- Top-right and bottom-left. The other two corners use nwse-resize.
- What is it called in Windows?
- Diagonal Resize 2, stored as SizeNESW (aero_nesw.cur).
- Is nesw-resize the same as ne-resize?
- On Windows they look the same. In meaning, nesw-resize says the corner can move both in and out.
More