What is row-resize for?

Dividers that change the height of rows or stacked panes, such as the bar between an editor and its console.

Should a bottom drawer use row-resize or ns-resize?

If people drag a bar to split the screen, row-resize. If they drag the drawer's own edge, ns-resize or n-resize.

Is there a Windows row-resize cursor?

No. Browsers ship their own image. Vertical Resize (SizeNS) is the closest Windows role.

Resize and scroll

cursor: row-resize in CSS: resize rows and stacked panes

row-resize shows a horizontal bar with arrows pointing up and down. It says 'drag this divider to make the row taller or shorter'.

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

What it shows

A horizontal double line with up and down arrows. Windows has no matching role (Vertical Resize is the closest), so browsers draw their own. On macOS 15 and later Chrome uses the system row resize cursor, and the up-down resize arrow before that.

Usage

When to use it

Use it for

Row borders in spreadsheets and grids.
The splitter between a code editor and a console or terminal below it.
Bottom panels and drawers with a drag bar along their top edge.

Avoid it for

A box's own top or bottom edge that stretches the box. ns-resize fits better.
Side-by-side panes. That is col-resize.

Code

Copy the snippet

CSS

.console-handle { cursor: row-resize; height: 8px; }

HTML

<div class="workspace">
  <main>Editor</main><div class="console-handle" role="separator" aria-orientation="horizontal"></div><footer>Console</footer>
</div>

Support

Browsers and systems

Browser support for row-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: SizeNS)
Windows file	`none (browser-supplied)`
macOS	Row resize (macOS 15+); resize up-down before

Watch out

Gotchas

Make the handle at least 8 px tall even when the visible line is a hairline.
Set the cursor on html for the length of the drag so it does not flicker back to the arrow.

FAQ

Questions

What is row-resize for?: Dividers that change the height of rows or stacked panes, such as the bar between an editor and its console.
Should a bottom drawer use row-resize or ns-resize?: If people drag a bar to split the screen, row-resize. If they drag the drawer's own edge, ns-resize or n-resize.
Is there a Windows row-resize cursor?: No. Browsers ship their own image. Vertical Resize (SizeNS) is the closest Windows role.