Should a split pane use col-resize or ew-resize?

Both work. col-resize (a bar with arrows) reads as 'move this divider'; ew-resize (a plain double arrow) reads as 'stretch this edge'. Code editors mostly use col-resize for splitters.

Does Windows have a col-resize cursor?

Not among its 17 roles, so a Windows scheme cannot change it. Browsers bring their own image; the nearest Windows role is Horizontal Resize.

Why does the cursor flicker while I drag a column border?

The pointer runs ahead of the narrow handle. Set cursor: col-resize on html for the length of the drag.

Resize and scroll

cursor: col-resize in CSS: drag to resize columns

col-resize shows a vertical bar with arrows pointing left and right. It says 'drag this divider to make the column wider or narrower'.

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

What it shows

A vertical double line with left and right arrows. Windows has no matching role (Horizontal Resize is the closest), so Chrome, Edge and Firefox draw their own. On macOS 15 and later Chrome uses the system column resize cursor, and the left-right resize arrow before that.

Usage

When to use it

Use it for

Column borders in data tables and grids.
The splitter between two side-by-side panes, like a file tree and an editor.
Timeline clips where dragging the boundary between two clips changes both lengths.

Avoid it for

Stretching a whole box from its edge. ew-resize or e-resize fits better.
Splitters between stacked panes. That is row-resize.

Code

Copy the snippet

CSS

.split-handle { cursor: col-resize; width: 8px; }

HTML

<div class="split">
  <aside>Files</aside><div class="split-handle" role="separator" aria-orientation="vertical"></div><main>Editor</main>
</div>

Support

Browsers and systems

Browser support for col-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	none (closest: SizeWE)
Windows file	`none (browser-supplied)`
macOS	Column resize (macOS 15+); resize left-right before

Watch out

Gotchas

Give the handle a hit area of at least 8 px even if the visible line is 1 px. A thin target is hard to catch.
During the drag, put the cursor on html too, or it flips back to the arrow when the pointer runs ahead of the divider.

FAQ

Questions

Should a split pane use col-resize or ew-resize?: Both work. col-resize (a bar with arrows) reads as 'move this divider'; ew-resize (a plain double arrow) reads as 'stretch this edge'. Code editors mostly use col-resize for splitters.
Does Windows have a col-resize cursor?: Not among its 17 roles, so a Windows scheme cannot change it. Browsers bring their own image; the nearest Windows role is Horizontal Resize.
Why does the cursor flicker while I drag a column border?: The pointer runs ahead of the narrow handle. Set cursor: col-resize on html for the length of the drag.