Summary

The cursor CSS property specifies the mouse cursor displayed when the mouse pointer is over an element.

• Initial value : auto
• Applies to: all elements
• Inherited : Yes
• Media: visual , interactive
• Computed value : as specified (if a keyword)

Syntax

CSS 2.1

cursor:
[ [ <uri>
 ,]* 
  [ auto | crosshair | default | help | move | pointer  | progress | text | wait | e-resize | 
    ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize ] ]
] | inherit

CSS 3

cursor:
[ [ <uri>
 [<x> <y>]?,]* 
  [ auto | default | none | context-menu | help | pointer | progress | wait | cell | 
    crosshair | text | vertical-text | alias | copy | move | no-drop | not-allowed | 
    e-resize | n-resize | ne-resize | nw-resize | s-resize | se-resize |
    sw-resize | w-resize | ew-resize | ns-resize | nesw-resize | nwse-resize |
    col-resize | row-resize | all-scroll ]
] | inherit

Values

<uri>

Optional.
A url(…) or a comma separated list url(…), url(…), … , pointing to an image file. More than one <uri> may be provided as fallback, in case some cursor image types are not supported. A non-URL fallback (one ore more of the other values) must be at the end of the fallback list. See Using URL values for the cursor property for more details.

<x> <y>

Optional x- and y-coordinates (not supported by Internet Explorer). Two unit-less numbers.

Supported CSS standard values

Category	CSS value move mouse over for testing		Description
General	auto		The browser determines the cursor to display based on the current context. E.g. equivalent to text when hovering text.
	default		Default cursor, typically an arrow.
	none		No cursor is rendered New in Firefox 3
Links & status	context-menu		A context menu is available under the cursor. In Gecko/Firefox not implemented on Windows, bug 258960 WONTFIX.
	help		Indicating help is available.
	pointer		E.g. used when hovering over links, typically a hand.
	progress		The program is busy in the background but the user can still interact with the interface (unlike for wait).
	wait		The program is busy (sometimes an hourglass or a watch).
Selection	cell		Indicating that cells can be selected.
	crosshair		Cross cursor, often used to indicate selection in a bitmap.
	text		Indicating text can be selected, typically an I-beam.
	vertical-text		Indicating that vertical text can be selected, typically a sideways I-beam.
Drag and drop	alias		Indicating an alias or shortcut is to be created.
	copy		Indicating that something can be copied.
	move		The hovered object may be moved.
	no-drop	Cursor showing that a drop is not allowed at the current location. bug 275173 on Windows, "no-drop is the same as not-allowed".
	not-allowed		Cursor showing that something cannot be done.
Resize & scrolling	all-scroll		Cursor showing that something can be scrolled in any direction (panned). bug 275174 on Windows, "all-scroll is the same as move".
	col-resize		The item/column can be resized horizontally. Often rendered as arrows pointing left and right with a vertical bar separating.
	row-resize		The item/row can be resized vertically. Often rendered as arrows pointing up and down with a horizontal bar separating them.
	n-resize		Some edge is to be moved. For example, the se-resize cursor is used when the movement starts from the south-east corner of the box.
	e-resize
	s-resize
	w-resize
	ne-resize
	nw-resize
	se-resize
	sw-resize
	ew-resize		Indicates a bidirectional resize cursor.
	ns-resize
	nesw-resize
	nwse-resize

Mozilla extensions

CSS value	Description	dropped	deprecated since
-moz-cell	Obsolete, use cell.	Gecko 1.9.2 (Firefox 3.6)	Gecko 1.8 (Firefox 1.5)
-moz-alias	Obsolete, use alias.	Gecko 2 (Firefox 4)
-moz-context-menu	Obsolete, use context-menu.
-moz-copy	Obsolete, use copy.
-moz-spinning	Obsolete, use progress.		Gecko 1.7.1 (Firefox 1.0)

-moz-grab	An element can be grabbed.	This cursors are not recommended for use on public web pages. Use of custom image cursors may provide better cross browser compatibility.
-moz-grabbing	An element is currently being grabbed.
-moz-zoom-in	An element is actually being resized, enlarged or is actually being magnified. bug 204841
-moz-zoom-out	An element is actually being resized, reduced or is actually being zoomed out. bug 204841

Notes

Examples

• View Live Examples
• CSS 2.1 and CSS 3 cursor propery test

.foo { cursor: crosshair; }

.bar { cursor: move;  cursor: cell; }  /* use move if cell isn't supported */ 

.baz { url(hyper.cur), auto }  /* standard cursor value as fallback must be provided */

Browser compatibility

Specifications

• CSS 2.1 User Interface #cursor
• CSS 3 User Interface #cursor
• Cursor Property (MSDN)

See also

• Using URL values for the cursor property
• pointer-events
• Webkit's cursor demos (including the extended ones: zoom, zoom-out, grab, grabbing)