cursor

The cursor property in CSS controls what the mouse cursor will look like when it is located over the element in which this property is set. Obviously, it’s only relevant in browsers/operating systems in which there is a mouse and cursor. They are used essentially for UX to convey the idea of certain functionality.

Values

There are a bunch of them:

/* general cursors */
.auto            { cursor: auto; }
.default         { cursor: default; }
.none            { cursor: none; }

/* link and status cursors */
.context-menu    { cursor: context-menu; }
.help            { cursor: help; }
.pointer         { cursor: pointer; }
.progress        { cursor: progress; }
.wait            { cursor: wait; }

/* selection cursors */
.cell            { cursor: cell; }
.crosshair       { cursor: crosshair; }
.text            { cursor: text; }
.vertical-text   { cursor: vertical-text; }

/* drag-and-drop cursors */
.alias           { cursor: alias; }
.copy            { cursor: copy; }
.move            { cursor: move; }
.no-drop         { cursor: no-drop; }
.not-allowed     { cursor: not-allowed; }
.grab            { cursor: grab; }
.grabbing        { cursor: grabbing; }

/* resizing and scrolling cursors */
.all-scroll      { cursor: all-scroll; }
.col-resize      { cursor: col-resize; }
.row-resize      { cursor: row-resize; }
.n-resize        { cursor: n-resize; }
.e-resize        { cursor: e-resize; }
.s-resize        { cursor: s-resize; }
.w-resize        { cursor: w-resize; }
.ns-resize       { cursor: ns-resize; }
.ew-resize       { cursor: ew-resize; }
.ne-resize       { cursor: ne-resize; }
.nw-resize       { cursor: nw-resize; }
.se-resize       { cursor: se-resize; }
.sw-resize       { cursor: sw-resize; }
.nesw-resize     { cursor: nesw-resize; }
.nwse-resize     { cursor: nwse-resize; }

/* zooming cursors */
.zoom-in         { cursor: zoom-in; }
.zoom-out        { cursor: zoom-out }

Demo

The cursor can also be an image

PNG, SVG, and and other non-animated image files are supported.

.custom {
  /* The second value, auto, is a fallback value for unsupported browsers */
  cursor: url(cursor-image.png), auto;
}

Notice how the custom cursor is triggered when the cursor’s outer edge enters the button element. The cursor property also accepts coordinate values to move the interactive area. For example, we can move it so that the cursor changes when its center enters the element. The coordinates go right after the image, before the comma that separates the fallback value:

.button {
  cursor: url(custom-cursor.svg) 16 16, auto;
}

Accessibility

It’s important that the cursor you use matches the intended functionality. For example, you would not want to use a zoom-in cursor to indicate help.

Some advice goes so far as to say that you shouldn’t use custom images for CSS mouse cursors at all. That’s probably solid advice to follow. But if you do roll your own image, it’s best to make sure it at least resembles one of the supported values so that the appearance matches the intended functionality.

Similarly, beware that some operating systems allow users to set a preferred cursor size, such as making it larger. As such, any custom image you use could be resized unintentionally, leading to overly large cursors. It’s best to make sure that your custom image is sized accordingly.

Specification

The CSS cursor property is defined in the CSS Basic Interface Module Level 3 specification.

Browser support

And for newer values, like grab, grabbing, zoom-in, and zoom-out: