An illustration of a pointing hand

While the browser will automatically change the appearance of the cursor in the context of many UI elements - switching it to a pointing hand when over links, for example - there are occasions when you’ll want to change it manually for particular operations: a compass cursor to indicate that an element may be moved, for example. This is commonly achieved through ; in particular, the cursor property for an element.

Be Careful Where You Point

It’s very important to note that you should never change the cursor “just because”. The cursor is the primary method visitor’s use to interact with your site; altering it just because you can ruins user’s UI expectations, leading to frustration and abandonment. If you set the cursor property, it should always be appropriate to the task at hand, and within the user’s expectations.

cursor is usually set on a particular element, often on :hover or similar state: for example, in one of my before-and-after image comparators:

 div#inked-painted:hover {
	cursor: col-resize;

There are a wide range of cursors available in browsers. Cursors will appear different between different operating systems; the only way to make them completely consistent is to make and use your own cursor image (for that, see the guide at the end of this article).

In the table below, cursors are shown by hovering over its name, to the left.

defaultThe default cursor; usually a pointer
autoThe cursor will as whatever is appropriate in the current browser context. Note that appearance will not always be exactly what you want, or what you think is appropriate.
noneNo cursor is rendered. Be particularly careful with this one, as it can really confuse users if not handled very carefully.
context-menuA contextual menu is available.
helpHelp is available with this option
pointerAssociated with hovering over a link; typically appears as a pointing hand
progressThe web application or site is busy in the background, but can still be interacted with. Don’t confuse this with the <progress> element. Often the same display as wait (see below).
waitThe application is busy (typically shown as a spinning ball or a working watch).
cellIndicates that table cells can be selected.
crosshairCross cursor, often used to indicate selection on a bitmap.
textHorizontal text can be selected.
vertical-textVertical text is available for selection.
aliasAn alias, shortcut, or symlink is to be created.
copySome content can be copied.
moveThe element may be moved.
no-dropAn element may not be dropped in this location. (Often the same appearance as not-allowed - see below).
not-allowedSomething cannot be done at this location.
all-scrollThe element can be scrolled or panned in any direction.
col-resizeThe element or column can be resized horizontally.
row-resizeThe element or row can be resized vertically.
n-resizeThe element can be resized, but only upwards.
e-resizeThe element can be resized, but only to the right.
w-resizeThe element can only be expanded to the left.
s-resizeThe element can only be expanded downwards.
ne-resizeThe upper right corner of an element can be dragged outwards.
nw-resizeThe upper left corner of an element can be dragged outwards.
se-resizeThe lower right corner of an element can be dragged outwards.
sw-resizeThe lower left corner of an element can be dragged outwards.
ew-resizeThe element may be resized horizontally.
ns-resizeThe element may be resized vertically.
nesw-resizeThe element may be resized diagonally, in the directions indicated.
nwse-resizeThe element may be resized diagonally, in the directions indicated.
zoom-inIndicates that something may be zoomed or magnified. No support in IE.
zoom-outIndicates that something may be zoomed out. No support in IE.
grabAn element can be grabbed. No support in IE; other browsers require vendor prefixes before the value(cursor: -webkit-grab, etc).
grabbingThe element is currently grabbed. No support in IE; as with the previous example, requires vendor prefixes.

Again, a cursor value by itself does not prevent other actions: a nesw-resize can still select text by default, for example.

Custom cursors

It’s also possible to set the cursor to a defined image, much as background images are set. There are a few problems with this:

  • Internet Explorer only supports the .cur and .ani files for the cursor; all other browsers support PNG, which (due to its support for alpha transparency) is recommended.
  • All browsers support setting the “hotpoint” of the cursor - the active or “pointing” part of the cursor, except for IE. These x and y coordinates are ignored in IE.

Custom cursors need to be designed as carefully as favicons; since they will be seen against both dark and light backgrounds, they must be drawn to work on both, such as the following:

Custom cusrsor design: note the use of black and white pixels to provide contrast against dark and light backgrounds

To use a custom cursor, a default and fallback must be provided for browsers such as IE:

canvas {
    cursor:  crosshair;
    cursor: url(circular-cursor.png) 53 53, crosshair;

In this case, the 53 53 represents the pointer of the cursor - it’s center, in this case - used in my “Scratch” Reveal with HTML5 canvas: 53 pixels from the left and top of the PNG file.

Enjoy this piece? I invite you to follow me at to learn more.