CSS Cursor Properties

Cursor1. Definitions and usage

The cursor property specifies the type (shape) of cursors to display.

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

2. Properties

Url	The URL of the custom cursor that you want to use. Note: Always define a normal cursor at the end of this list in case there are no available cursors defined by the URL.
Default	Default cursor (usually an arrow)
Auto	Default. The cursor of the browser settings.
Crosshair	The cursor is rendered as a crosshair.
Pointer	Cursor rendered as a pointer indicating the link (one hand)
Move	This cursor indicates that an object can be moved.
E-resize	This cursor indicates that the edge of the rectangle can be moved to the right (east).
Ne-resize	This cursor indicates that the edge of the rectangle can be moved up and to the right (north/east).
Nw-resize	This cursor indicates that the edge of the rectangle can be moved up and to the left (north/west).
N-resize	This cursor indicates that the edge of the rectangle box can be moved up (north).
Se-resize	This cursor indicates that the edge of the rectangle can be moved down and to the right (south/east).
Sw-resize	This cursor indicates that the edge of the rectangle can be moved down and to the left (south/west).
S-resize	This cursor indicates that the edge of the rectangle can be moved down (south).
W-resize	This cursor indicates that the edge of the rectangle can be moved to the left (west).
Text	This cursor indicates the text.
Wait	This cursor indicates that the program is busy (usually a table or an hourglass).
Help	This cursor indicates the available help (usually a question mark or a balloon).

3. Supported Browsers

Cursor properties are supported by all major browsers.

Note: The URL value is not supported for Opera 9.3 and Safari 3.

Note: The property value "Inherit" is not supported by any version of Internet Explorer, including IE8.

4.html Code

"Cursor:auto">auto</span><br/> <span style="Cursor:crosshair">crosshair</span><br/> <span style="Cursor:default">default</span><br/> <span style="Cursor:pointer">pointer</span><br/> <span style="Cursor:move">move</span><br/> <span style="cursor:e-resize">e-resize</span><br/> <span style="cursor:ne-resize">ne-resize</span><br/> <span style="cursor:nw-resize">nw-resize</span><br/> <span style="cursor:n-resize">n-resize</span><br/> <span style="cursor:se-resize">se-resize</span><br/> <span style="cursor:sw-resize">sw-resize</span><br/> <span style="cursor:s-resize">s-resize</span><br/> <span style="cursor:w-resize">w-resize</span><br/> <span style="Cursor:text">text</span><br/> <span style="cursor:wait">wait</span><br/> <span style="Cursor:help">help</span> </body>
CSS Cursor Properties