Resize and scroll
cursor: ew-resize in CSS: the left-right resize arrow
ew-resize is the left-right double arrow. It says 'drag this edge either way'.
cursor: ew-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 Horizontal Resize (the SizeWE role, aero_ew.cur). macOS shows its left-right resize arrow.
Usage
When to use it
Use it for
- Left and right edges of panels and boxes that can get both wider and narrower.
- The divider of a before-and-after image comparison that you drag sideways.
- Range sliders built from a draggable handle, when you want the arrow instead of a hand.
Avoid it for
- Table column borders. col-resize is the convention there.
- Things that only scroll sideways. Scrolling needs no special cursor.
Code
Copy the snippet
.compare-handle { cursor: ew-resize; }<div class="compare">
Before | After<div class="compare-handle" role="slider" aria-label="Compare" aria-valuenow="50"></div>
</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 | SizeWE |
| Windows file | aero_ew.cur |
| macOS | Resize left-right |
Watch out
Gotchas
- On Windows, e-resize, w-resize and ew-resize all show the same Horizontal Resize cursor.
- If the handle is a slider, give it role="slider" and arrow-key support. The cursor alone does not make it usable.
Free cursors
A custom ew-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
- What is the difference between ew-resize and col-resize?
- ew-resize is a plain double arrow for stretching an edge. col-resize adds a bar and reads as 'move this divider'. Both are fine on a splitter.
- Which Windows cursor is ew-resize?
- Horizontal Resize, stored as SizeWE (aero_ew.cur).
- Does the browser use ew-resize anywhere by itself?
- Yes. Chrome shows it over the grip of an element with resize: horizontal.
More