Cursor styles

Back to the index.

This page has been translated into Italian.

By changing the value of the cursor declaration you can assign cursor styles to various HTML elements. Although in theory this is great functionality, it's very easy to confuse your users by defining inappropriate cursor styles. Please be very careful; in general the browser defaults work fine, and besides they're what the user expects.

The leftmost cells of the compatibility table have the indicated cursor value. See also the W3C and Microsoft references.

Method or property Internet Explorer Edge 13 Firefox Safari Chrome Opera UC 5.6
8 9 10 11 47 Win 47 Mac 9.1.1 51 Win 51 Mac 38 Win 38 Mac
alias
No Yes Yes Yes Yes Yes Yes
all-scroll
Yes Yes Yes Yes Yes Yes
cell
No Yes Yes Yes Yes Yes Yes
col-resize
Yes Yes Yes Yes Yes Yes
context-menu
No Yes No Yes Yes No Yes No Yes No
copy
No Yes Yes Yes Yes Yes Yes
crosshair
Yes Yes Yes Yes Yes Yes
default
Yes Yes Yes Yes Yes Yes
hand
Yes No No No No No No

See the note below.

Method or property Internet Explorer Edge 13 Firefox Safari Chrome Opera UC 5.6
8 9 10 11 47 Win 47 Mac 9.1.1 51 Win 51 Mac 38 Win 38 Mac
help
Yes Yes Yes Yes Yes Yes
move
Yes Yes Yes Yes Yes Yes
no-drop
Yes Yes Yes Yes Yes Yes
none
No Yes Yes Yes Yes Yes Yes
not-allowed
Yes Yes Yes Yes Yes Yes
pointer
Yes Yes Yes Yes Yes Yes

See the note below.

progress
Yes Yes Yes Yes Yes Yes
Method or property Internet Explorer Edge 13 Firefox Safari Chrome Opera UC 5.6
8 9 10 11 47 Win 47 Mac 9.1.1 51 Win 51 Mac 38 Win 38 Mac
row-resize
Yes Yes Yes Yes Yes Yes
text
Yes Yes Yes Yes Yes Yes
url
No Almost Yes Yes Yes Yes

Use a gif image as cursor:

Syntax: cursor: url(../pix/cursor_ppk.gif),auto. The auto is required as fallback; the url will not work without it. (Don’t ask me why.)

See the note below.

  • Firefox has a bug in this test: although I defined the cursor for the entire TD, Firefox only shows it when I hover over the DIV inside the TD.
url
Yes Almost Yes Yes Yes Yes

Use a cur image as cursor:

Syntax: cursor: url(../pix/cursor_ppk.cur),auto. The auto is required as fallback; the url will not work without it. (Don’t ask me why.)

I have heard, but did not test, that the cursor’s URL must be relative to the page, and not to the style sheet, in IE at least up to 9.

See the note below.

  • Firefox has a bug in this test: although I defined the cursor for the entire TD, Firefox only shows it when I hover over the DIV inside the TD.
vertical-text
Yes Yes Yes Yes Yes Yes
wait
Yes Yes Yes Yes Yes Yes
*-resize
Yes Yes Yes Yes Yes Yes

The example is 'N-resize'. Instead of the 'N' you can also use 'NW', 'W', 'SW', 'S', 'SE', 'E', 'NE'

zoom-in
No Yes Yes Yes Yes Yes Yes
zoom-out
No Yes Yes Yes Yes Yes Yes
Method or property Internet Explorer Edge 13 Firefox Safari Chrome Opera UC 5.6
8 9 10 11 47 Win 47 Mac 9.1.1 51 Win 51 Mac 38 Win 38 Mac

Tested browsers

Desktop browser test array 3.0; July 2016

IE 8, 9, and 10
Trident
On separate Windows 7 virtualizations as downloaded from Modern IE.
IE11
Trident
On Windows 8.1 virtualization as downloaded from Modern IE.
Edge 13
MS Edge 13
On Surface Book with Windows 10.
Firefox 47
Gecko 47
47.0.1 on Win10 and Mac
Safari 9.1.1
WebKit
9.1.1 on Mac
Chrome 51
Chromium 51
51 on Win10 and Mac
Opera 38
Chromium 51
38 on Win10 and Mac
UC 5.6
Chromium 48
5.6 on Windows 7

Operating systems

Mac
Mac Mini with OS 10.11.15
This is my main test station. It also runs all virtual Windows systems.
Windows 7 and 8.1
All downloaded from modern.ie. I use Parallels, and downloded the Windows 7 systems for all browsers but IE11, which runs on Windows 8.1.
Windows 10
Microsoft Surface Book with Windows 10

Note on pointer and hand

In the past the hand value was Microsoft's way of saying pointer; and IE 5.0 and 5.5 only support hand. Because it's the cursor value that's used most often, most other browsers have also implemented hand.

Since IE 6 and 7 support pointer, there's no more reason to use hand, except when older IEs are part of your target audience. In that case, the only cross-browser syntax is:

element {
	cursor: pointer;
	cursor: hand;
}

Note that the two declarations must be in this order.

Note on URLs

IE/Edge needs CUR, while all other browsers need GIF. Fortunately you can combine them.

element {
	cursor: url(../pix/cursor_ppk.gif),auto;
	cursor: url(../pix/cursor_ppk.cur),auto;
}

Note that the two declarations must be in this order.