1. css
  2. /properties
  3. /cursor

cursor

Definition

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

Examples

Display a "pointer" cursor on all links:

a {
  cursor: pointer;
}

Display a "crosshair" cursor when hovering over a <div> element:

  div {
  cursor: crosshair;
}

Display an "alias" cursor when hovering over an <img> element:

  img {
  cursor: alias;
}

Values

ValueDescription
autoThe default. The browser sets a cursor.
crosshairA simple crosshair.
defaultThe platform-dependent default cursor. Often rendered as an arrow.
pointerA clickable hand cursor.
moveIndicates something is to be moved.
not-allowedIndicates the requested action will not be executed.
helpHelp cursor, usually a question mark or balloon.
e-resizeIndicates a bidirectional resize cursor from left and right.
n-resizeIndicates a bidirectional resize cursor from top and bottom.
ne-resizeIndicates a bidirectional resize cursor from top-right and bottom-left.
nw-resizeIndicates a bidirectional resize cursor from top-left and bottom-right.
s-resizeIndicates a bidirectional resize cursor from bottom to top.
se-resizeIndicates a bidirectional resize cursor from bottom-right to top-left.
sw-resizeIndicates a bidirectional resize cursor from bottom-left to top-right.
w-resizeIndicates a bidirectional resize cursor from right to left.
textIndicates a text edit cursor.
waitIndicates that the program is busy and the user should wait.
progressA progress indicator. The program is busy, but the user may still interact with the interface.
inheritInherits the value of the parent element.

Best Practices

  • Use the "pointer" cursor for clickable elements, such as links and buttons, to indicate that they are clickable.
  • Use the "not-allowed" cursor for disabled elements to indicate that they are not clickable.
  • Use the appropriate cursor for the specific action or element, such as "move" for movable elements or "text" for text editing elements.
  • Avoid using custom cursors as they may not be recognized by all browsers.
  • Consider the accessibility implications of using custom cursors, as they may be difficult for some users to see or understand.
  • Be mindful of the performance impact of using custom cursors, as some browsers may need to download the cursor resource, leading to slow loading times.

Browser Compatibility

ChromeFirefoxSafariInternet ExplorerMicrosoft EdgeOpera
YesYesYesYesYesYes