--- title: cursor slug: Web/CSS/cursor tags: - CSS - CSS Property - Layout - NeedsBrowserCompatibility - NeedsLiveSample - NeedsMobileBrowserCompatibility - NeedsTranslation - Reference - TopicStub - Web translation_of: Web/CSS/cursor ---

Summary

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

Syntax

Formal syntax: {{csssyntax("cursor")}}

Values

<uri>

A url(…) or a comma separated list url(…), url(…), …, pointing to an image file. More than one {{cssxref("<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> {{ experimental_inline() }}

Optional x- and y-coordinates. Two unit-less non-negative numbers less than 32.

Keyword values

Move mouse over value for testing:

Category	CSS value	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.
Links & status	`context-menu`	A context menu is available under the cursor. Only IE 10 and up have implemented this on Windows: {{ Bug("258960") }}.
	`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`
Zoom	`zoom-in`	Indicates that something can be zoomed (magnified) in or out.
Zoom	`zoom-out`
Grab	`grab`	Indicates that something can be grabbed (dragged to be moved).
Grab	`grabbing`

Examples

.foo { cursor: crosshair; }

/* use prefixed-value if "zoom-in" isn't supported */
.bar { cursor: -webkit-zoom-in;  cursor: zoom-in; }

/* standard cursor value as fallback for url() must be provided (doesn't work without) */
.baz { cursor: url(hyper.cur), auto }

Specifications

Specification	Status	Comment
{{ SpecName('CSS3 UI', '#cursor', 'cursor') }}	{{ Spec2('CSS3 Basic UI') }}	Addition of several keywords and the positioning syntax for `url()`.
{{ SpecName('CSS2.1', 'ui.html#cursor-propsy', 'cursor') }}	{{ Spec2('CSS2.1') }}	Initial definition.

Browser compatibility