CSS cursor attribute

Definition and Usage

The cursor property specifies the type (shape) of cursor to be displayed.

This property defines the cursor shape used when the mouse pointer is within the boundary range of an element (although CSS2.1 does not define which boundary determines this range).

See also:

CSS Tutorial:CSS Positioning

HTML DOM Reference Manual:cursor property

Example

Some different cursors:

span.crosshair {cursor:crosshair;}
span.help {cursor:help;}
span.wait {cursor:wait;}

Try it yourself

CSS syntax

cursor: value;

Attribute value

Value Description
url

The URL of the custom cursor to be used.

Note:Always define a common cursor at the end of this list in case no cursor defined by URL is available.
default Default cursor (usually an arrow)
auto Default. The cursor set by the browser.
crosshair The cursor appears as a crosshair.
pointer The cursor appears as a pointer indicating a link (a hand).
move This cursor indicates that an object can be moved.
e-resize This cursor indicates that the edge of the rectangular box can be moved to the right (east).
ne-resize This cursor indicates that the edge of the rectangular box can be moved up and to the right (north/east).
nw-resize This cursor indicates that the edge of the rectangular box can be moved up and to the left (north/west).
n-resize This cursor indicates that the edge of the rectangular box can be moved up (north).
se-resize This cursor indicates that the edge of the rectangular box can be moved down and to the right (south/east).
sw-resize This cursor indicates that the edge of the rectangular box can be moved down and to the left (south/west).
s-resize This cursor indicates that the edge of the rectangular box can be moved down (south).
w-resize This cursor indicates that the edge of the rectangular box can be moved to the left (west).
text This cursor indicates text.
wait This cursor indicates that the program is busy (usually an hourglass or a clock).
help This cursor indicates available help (usually a question mark or a balloon).

Technical details

Default value: auto
Inheritance: yes
Version: CSS2
JavaScript syntax: object.style.cursor="crosshair"

TIY example

Change cursor
This example demonstrates how to change the cursor.

Browser support

The numbers in the table indicate the first browser version that fully supports this property.

Chrome IE / Edge Firefox Safari Opera
5.0 5.5 4.0 5.0 9.6

Note:Opera 9.3 and Safari 3 do not support url Value.