cursor

The cursor property designates which mouse cursor is displayed when hovering over an element.

Syntax

Examples:

div.one {
  cursor: auto;
}

div.two {
  cursor: crosshair;
}

div.three {
  cursor: none;
}

Values

alias
The cursor shows that an alias of something is to be created.

all-scroll
The cursor shows that something can be scrolled in any direction.

auto
Default value. The browser determines which cursor is used.

cell
The cursor shows that a cell or set of cells may be selected.

col-resize
The cursor shows that the column can be resized horizontally.

context-menu
The cursor shows that a context-menu is available.

copy
The cursor shows that something is to be copied.

crosshair
The cursor displays as a crosshair.

default
The default cursor is displayed.

e-resize
The cursor shows that an edge of a box is to be moved to the right (east).

ew-resize
A bidirectional resize cursor is displayed.

grab
The cursor shows that something can be grabbed.

grabbing
The cursor shows that something can be grabbed.

help
The cursor shows that help is available.

move
The cursor shows that something is to be moved.

n-resize
The cursor shows that an edge of a box is to be moved up (north).

ne-resize
The cursor shows that an edge of a box is to be moved up and to the right (northeast).

nesw-resize
A bidirectional resize cursor is displayed.

ns-resize
A bidirectional resize cursor is displayed.

nw-resize
The cursor shows that an edge of a box is to be moved up and to the left (north/west).

nwse-resize
A bidirectional resize cursor is displayed.

no-drop
The cursor shows that a dragged item cannot be dropped here.

none
No cursor is displayed.

not-allowed
The cursor shows that the action will not be executed.

pointer
The cursor shows that the element is a link.

progress
The cursor shows that the program is busy (in progress).

row-resize
The cursor shows that the row can be resized vertically.

s-resize
The cursor shows that an edge of a box is to be moved down (south).

se-resize
The cursor shows that an edge of a box is to be moved down and to the right (south/east).

sw-resize
The cursor shows that an edge of a box is to be moved down and to the left (south/west).

text
The cursor shows text that may be selected.

URL
A comma-separated list of URLs to custom cursors.

vertical-text
The cursor shows vertical-text that may be selected.

w-resize
The cursor shows that an edge of a box is to be moved to the left (west).

wait
The cursor shows that the program is busy.

zoom-in
The cursor shows that something can be zoomed in.

zoom-out
The cursor shows that something can be zoomed out.

initial
Sets the property to its default value.

inherit
Inherits this property’s value from its parent item.

Browser Compatibilty

Demos

Have a code example of cursor? Submit a codepen.io demo and we'll showcase it here ↴