CSS Cursor

Description

The cursor CSS property specifies the type of cursor to be displayed when the pointer is placed over an element.

The following table summarizes the usages context and the version history of this property.

Default value:auto
Applies to:All elements
Inherited:Yes
Animatable:No. See animatable properties.
Version:CSS 2, 3

Syntax

The syntax of the property is given with:

cursor: [url(address of cursor file),]0 or more times | auto | default | none | context-menu | help | pointer | progress | wait | cell | crosshair | text | vertical-text | alias | copy | move | no-drop | not-allowed | grab | grabbing | e-resize | n-resize | ne-resize | nw-resize | s-resize | se-resize | sw-resize | w-resize | ew-resize | ns-resize | nesw-resize | nwse-resize | col-resize | row-resize | all-scroll | zoom-in | zoom-out | initial | inherit

The example below shows the cursor property in action.

Example

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

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. 


Property Values

The following table describes the values of this property.

ValueLookDescription
General
auto The browser determines the cursor to display based on the current context. E.g. equivalent to text when hovering text. This is default.
defaultDefault CursorThe default cursor for the platform, without regard for the context, typically an arrow.
none No cursor is rendered.
initialSets this property to its default value.
inheritIf specified, the associated element takes the computed value of its parent element cursor property.
Links & status Cursors
context-menuContext-menu CursorIndicates that a context-menu is available.
helpHelp CursorIndicates that help is available.
pointerPointer CursorA cursor that indicates a link, typically a hand with an extended index finger.
progressProgress CursorA progress indicator. The program is performing some processing but the user can still interact with the interface (unlike for wait).
waitWait CursorIndicates that the program is busy and the user should wait.
Selection Cursors
cellCell CursorIndicates that a cell (or set of cells) can be selected.
crosshairCrosshair CursorA simple crosshair. Often used to indicate selection in a bitmap.
textText CursorIndicates text that can be selected, typically an I-beam.
vertical-textVertical-text CursorIndicates that vertical text can be selected, a sideways I-beam.
Drag and Drop Cursors
aliasAlias CursorIndicates that an alias or shortcut is to be created.
copyCopy CursorIndicates that something can be copied.
moveMove CursorIndicates that the hovered object can be moved.
no-dropNo-drop CursorIndicates that the dragged item cannot be dropped at the current location.
not-allowedNot-allowed CursorIndicates that something cannot be done.
Resizing & scrolling Cursors
all-scrollAll-scroll CursorIndicates that something can be scrolled in any direction (panned).
col-resizeCol-resize CursorIndicates that the column can be resized horizontally.
row-resizeRow-resize CursorIndicates that the row can be resized vertically.
n-resizeN-resize CursorIndicates that some edge is to be moved up (north).
e-resizeE-resize CursorIndicates that some edge is to be moved right (east).
s-resizeS-resize CursorIndicates that some edge is to be moved down (south).
w-resizeW-resize CursorIndicates that some edge is to be moved left (west).
ne-resizeNE-resize CursorIndicates that some edge is to be moved up and right (north/east).
nw-resizeNW-resize CursorIndicates that some edge is to be moved up and left (north/west).
se-resizeSE-resize CursorIndicates that some edge is to be moved down and right (south/east).
sw-resizeSW-resize CursorIndicates that some edge is to be moved down and left (south/west).
ew-resizeEW-resize CursorIndicates a bidirectional resize cursor.
ns-resizeNS-resize Cursor
nesw-resizeNESW-resize Cursor
nwse-resizeNWSE-resize Cursor
Zoom and Grab Cursors
zoom-inZoom-in CursorIndicates that something can be zoomed in.
zoom-outZoom-out CursorIndicates that something can be zoomed out.
grabGrab CursorIndicates that something can be grabbed (dragged to be moved).
grabbingGrabbing CursorIndicates that something is grabbed.

Browser Compatibility

The cursor property is supported in all major modern browsers.

Follow Us On