CSS Cursors

CSS cursor property used to define cursor type (i.e. mouse pointer) when the mouse moves over a certain area or, over a link on the webpage.

Changing the Look of Cursor

The browsers typically display the mouse pointer over any blank part of a web page, the gloved hand over any linked or clickable item and the edit cursor over any text or text field. With CSS you can redefine those properties to display a variety of different cursors.

h1 {
    cursor: move;
}
p {
    cursor: text;
}

The table below demonstrates the different cursors that most browsers will accept. Place your mouse pointer over the "TEST" link in the output column to reveal that cursor.

Look	Values	Example	Output
	default	a:hover{cursor:default;}	TEST
	pointer	a:hover{cursor:pointer;}	TEST
	text	a:hover{cursor:text;}	TEST
	wait	a:hover{cursor:wait;}	TEST
	help	a:hover{cursor:help;}	TEST
	progress	a:hover{cursor:progress;}	TEST
	crosshair	a:hover{cursor:crosshair;}	TEST
	move	a:hover{cursor:move;}	TEST
	url()	a:hover{cursor:url("custom.cur"), default;}	TEST

Check out more cursors »

Creating a Customized Cursor

It is also possible to have completely customized cursors.

The cursor property handles a comma-separated list of user-defined cursors values followed by the generic cursor. If the first cursor is specified incorrectly or can't be found, the next cursor in the comma-separated list will be used, and so on until a usable cursor is found.

If none of the user-defined cursors is valid or supported by the browser, the generic cursor at the end of the list will be used instead.

a {
    cursor: url("custom.gif"), url("custom.cur"), default;
}

In the above example custom.gif and custom.cur is the custom cursor file, uploaded to your server space, and default is the generic cursor that will be used if the custom cursor is missing, or isn't supported by the viewer's browser.

Here is a live demonstration of a custom cursor.