Resize and scroll
cursor: ne-resize in CSS: the top-right corner
ne-resize marks a top-right (north-east) corner that can be dragged up and to the right.
cursor: ne-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 2 (the SizeNESW role, aero_nesw.cur), the same as nesw-resize and sw-resize.
Usage
When to use it
Use it for
- The top-right handle of a crop box or selection.
- A floating player or chat window docked to the bottom-left, which grows from its top-right corner.
- Corner handles in a design tool when the corner can only grow outward.
Avoid it for
- Bottom-right grips like a textarea's. That is se-resize.
- Corners that move both ways. Use nesw-resize.
Code
Copy the snippet
.crop-handle.ne { cursor: ne-resize; }<div class="crop">
<span class="crop-handle ne" aria-label="Top-right handle"></span>
</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 | SizeNESW |
| Windows file | aero_nesw.cur |
| macOS | Frame resize, top-right 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.
- Corner handles are small. Give each one a hit area of at least 16 by 16 px.
FAQ
Questions
- Which Windows cursor is ne-resize?
- Diagonal Resize 2, stored as SizeNESW (aero_nesw.cur). Windows uses it for ne-resize, sw-resize and nesw-resize.
- Should crop handles use ne-resize or nesw-resize?
- nesw-resize in most croppers, because the corner can move both in and out. ne-resize only when it can only grow.
- What does ne stand for?
- North-east: the top-right corner.
More