W3docs
en
Log in

CSS cursor Property

The cursor CSS property sets how the cursor looks like when you hover over the element. Know about all the values and see examples with each of them.

The cursor property controls the shape of the mouse pointer when it hovers over an element. It is a visual cue: the pointer's shape tells the user what will happen if they click, drag, or hover — a hand means "this is clickable," a text beam means "you can select text here," a spinning wheel means "wait."

This page covers when to reach for cursor, the full list of keyword values grouped by purpose, how to load your own image as a custom cursor (with the <url> syntax and its fallbacks), and the accessibility pitfalls to avoid.

Why and when to use it

Browsers already pick a sensible cursor for every element — a text beam over a paragraph, a pointing hand over a link. You mainly override the default when:

  • You build a custom interactive control (a <div> acting as a button, a draggable card, a sortable handle) where the browser has no way to guess the right cursor. Here a pointer or grab cursor restores the affordance users expect.
  • You want to signal state — a disabled control with not-allowed, or a busy region with wait/progress.
  • You need a branded or game-style pointer via a custom image.

Use it sparingly and predictably. A cursor that contradicts behaviour (a pointer hand over non-clickable text, or none hiding the cursor on a normal page) confuses people more than it helps.

Syntax overview

The value is zero or more comma-separated <url> values, each pointing to an image file, followed by a mandatory keyword fallback. The browser tries each image in order and falls back to the next if an image can't load; if none load, it uses the keyword. This is why the keyword at the end is required — it guarantees the user always gets some cursor.

/* keyword only */
cursor: pointer;

/* custom image with a keyword fallback (the fallback is required) */
cursor: url("cursor.png"), auto;

/* multiple images tried in order, then the fallback */
cursor: url("cursor.svg"), url("cursor.png"), auto;
Info

Modern browsers support grab, grabbing, zoom-in, and zoom-out without vendor prefixes. To keep clicks landing where users expect, pair custom-cursor changes with the related pointer-events and user-select properties.

Initial Valueauto
Applies toAll elements.
InheritedYes.
AnimatableNo.
VersionCSS2
DOM Syntaxobject.style.cursor = "cell";

All keyword values

Every keyword the property accepts, in one place. The most common in everyday UI work are pointer (clickable), default (the plain arrow), text, move, grab/grabbing, and not-allowed.

cursor: auto | default | none | context-menu | help | pointer | progress | wait | cell | crosshair | text | <url> | vertical-text | alias | copy | move | no-drop | not-allowed | all-scroll | col-resize | row-resize | n-resize | s-resize | e-resize | w-resize | ns-resize | ew-resize | ne-resize | nw-resize | se-resize | sw-resize | nesw-resize | nwse-resize | zoom-in | zoom-out | grab | grabbing

Example with the auto and help values

Example of CSS cursor Property with auto and help values

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        text-align: center;
        font-family: Roboto, Helvetica, Arial, sans-serif;
      }
      .auto {
        cursor: auto;
      }
      .help {
        cursor: help;
      }
      .cursor {
        display: flex;
        flex-wrap: wrap;
      }
      .cursor > div {
        flex: 120px;
        padding: 10px 2px;
        white-space: nowrap;
        border: 2px solid #666;
        border-radius: 20px;
        margin: 0 5px 5px 0;
      }
      .cursor > div:hover {
        background: #eee;
      }
    </style>
  </head>
  <body>
    <h2>Cursor property example</h2>
    <div class="cursor">
      <div class="auto">auto</div>
      <div class="help">help</div>
    </div>
  </body>
</html>
Try it Yourself »

The next example renders a labelled box for every keyword value so you can hover each one and see its cursor in your browser.

Example showing every cursor value

Example of CSS cursor Property with all values

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        text-align: center;
        font-family: Roboto, Helvetica, Arial, sans-serif;
      }
      .cursor {
        display: flex;
        flex-wrap: wrap;
      }
      .cursor > div {
        flex: 120px;
        padding: 10px 2px;
        white-space: nowrap;
        border: 2px solid #666;
        border-radius: 20px;
        margin: 0 5px 5px 0;
      }
      .cursor > div:hover {
        background: #eee;
      }
      .auto {
        cursor: auto;
      }
      .default {
        cursor: default;
      }
      .none {
        cursor: none;
      }
      .context-menu {
        cursor: context-menu;
      }
      .help {
        cursor: help;
      }
      .pointer {
        cursor: pointer;
      }
      .progress {
        cursor: progress;
      }
      .wait {
        cursor: wait;
      }
      .cell {
        cursor: cell;
      }
      .crosshair {
        cursor: crosshair;
      }
      .text {
        cursor: text;
      }
      .vertical-text {
        cursor: vertical-text;
      }
      .alias {
        cursor: alias;
      }
      .copy {
        cursor: copy;
      }
      .move {
        cursor: move;
      }
      .no-drop {
        cursor: no-drop;
      }
      .not-allowed {
        cursor: not-allowed;
      }
      .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;
      }
      .grab {
        cursor: grab;
      }
      .grabbing {
        cursor: grabbing;
      }
      .zoom-in {
        cursor: zoom-in;
      }
      .zoom-out {
        cursor: zoom-out;
      }
    </style>
  </head>
  <body>
    <h2>Cursor property example</h2>
    <p> Hover the mouse cursor over the element to see the changes</p>
    <div class="cursor">
      <div class="auto">auto</div>
      <div class="default">default</div>
      <div class="none">none</div>
      <div class="context-menu">context-menu</div>
      <div class="help">help</div>
      <div class="pointer">pointer</div>
      <div class="progress">progress</div>
      <div class="wait">wait</div>
      <div class="cell">cell</div>
      <div class="crosshair">crosshair</div>
      <div class="text">text</div>
      <div class="vertical-text">vertical-text</div>
      <div class="alias">alias</div>
      <div class="copy">copy</div>
      <div class="move">move</div>
      <div class="no-drop">no-drop</div>
      <div class="not-allowed">not-allowed</div>
      <div class="all-scroll">all-scroll</div>
      <div class="col-resize">col-resize</div>
      <div class="row-resize">row-resize</div>
      <div class="n-resize">n-resize</div>
      <div class="s-resize">s-resize</div>
      <div class="e-resize">e-resize</div>
      <div class="w-resize">w-resize</div>
      <div class="ns-resize">ns-resize</div>
      <div class="ew-resize">ew-resize</div>
      <div class="ne-resize">ne-resize</div>
      <div class="nw-resize">nw-resize</div>
      <div class="se-resize">se-resize</div>
      <div class="sw-resize">sw-resize</div>
      <div class="nesw-resize">nesw-resize</div>
      <div class="nwse-resize">nwse-resize</div>
      <div class="grab">grab</div>
      <div class="grabbing">grabbing</div>
      <div class="zoom-in">zoom-in</div>
      <div class="zoom-out">zoom-out</div>
    </div>
  </body>
</html>
Try it Yourself »

Custom cursor with the "url" value

You can supply your own image as a cursor. A few rules make this reliable:

  • Always end with a keyword fallback (, auto below). Without it the declaration is invalid and is ignored entirely.
  • Keep images small. Browsers cap custom cursors at roughly 32×32 px (128×128 px in some); larger images are dropped silently and the fallback is used.
  • Set the hotspot — the active click point — with two optional numbers after the URL: cursor: url("crosshair.png") 16 16, auto; makes the centre of a 32×32 image the click point. Omit them and the top-left corner is used.
  • Use a format every target browser supports (PNG and SVG are safe; .cur/.ani are Windows-only).

Example of the cursor property with the url

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .cursor {
        display: inline-block;
        width: 30px;
        height: 30px;
        cursor: url("/uploads/media/default/0001/04/6388ec92938ec31c9f019a249174f683118b55d6.png"), auto;
      }
    </style>
  </head>
  <body>
    <h2>Cursor property example</h2>
    <p> Hover the mouse cursor over the element to see the changes</p>
    <i class="cursor">Icon</i>
  </body>
</html>
Try it Yourself »

Values

ValueDescriptionPlay it
autoIt means that the browser will set a cursor. It is the default value of this property.Play it »
defaultIt is the default cursor.Play it »
noneIt means that there is no cursor rendered for the element.Play it »
context-menuThe cursor indicates that a context-menu is available.Play it »
helpThe cursor indicates that help is available.Play it »
pointerThe cursor indicates a link as a pointer.Play it »
progressThe cursor indicates that the program is busy or in progress.Play it »
waitThe cursor indicates that the program is busy.Play it »
cellIt means that the cursor will indicate that a cell or set of cells may be selected.Play it »
crosshairThe cursor will be rendered as a crosshair.Play it »
textThe cursor indicates text which may be selected.Play it »
<url>A comma-separated list of URLs for custom cursors.Play it »
vertical-textThe cursor indicates vertical text which can be selected.Play it »
aliasIt means that the cursor will indicate an alias of something is to be created.Play it »
copyThe cursor indicates something which can be copied.Play it »
moveThe cursor indicates that something can be moved.Play it »
no-dropThe cursor indicates that the dragged item cannot be dropped here.Play it »
not-allowedThe cursor indicates that the requested action will not be executed.Play it »
all-scrollIt means that the cursor will indicate something can be scrolled in any direction.Play it »
col-resizeThe cursor indicates that the column can be resized horizontally.Play it »
row-resizeThe cursor indicates that the row can be resized vertically.Play it »
n-resizeThe cursor indicates that an edge of a box is to be moved up.Play it »
s-resizeThe cursor indicates that an edge of a box is to be moved down.Play it »
e-resizeThe cursor indicates that an edge of a box is to be moved right.Play it »
w-resizeThe cursor indicates that an edge of a box is to be moved left.Play it »
ns-resizeThe cursor indicates a bidirectional resize cursor.Play it »
ew-resizeThe cursor indicates bidirectional resize cursor.Play it »
ne-resizeThe cursor indicates that an edge of a box is to be moved up and right.Play it »
nw-resizeThe cursor indicates that an edge of a box is to be moved up and left.Play it »
se-resizeThe cursor indicates that an edge of a box is to be moved down and right.Play it »
sw-resizeThe cursor indicates that an edge of a box is to be moved down and left.Play it »
nesw-resizeThe cursor indicates a bidirectional resize cursor.Play it »
nwse-resizeThe cursor indicates a bidirectional resize cursor.Play it »
zoom-inThe cursor indicates that something can be zoomed in.Play it »
zoom-outThe cursor indicates that something can be zoomed out.Play it »
grabThe cursor indicates that something can be grabbed.Play it »
grabbingThe cursor indicates that an element is currently being dragged.Play it »
initialIt makes the property use its default value.Play it »
inheritIt inherits the property from its parents element.

Accessibility and common gotchas

  • cursor is a hint, not a control. It changes how the pointer looks, never what the element does. A pointer cursor does not make a <div> clickable, and not-allowed does not disable a button — you still need real behaviour (an onclick, the disabled attribute, ARIA roles).
  • Don't rely on the cursor alone to signal disabled or busy states. Keyboard and touch users never see it. Combine it with visible styling and the correct attributes.
  • Avoid cursor: none on ordinary pages. Hiding the pointer can trap users who can no longer find it. Reserve it for full-screen experiences (games, kiosks) that manage their own pointer.
  • Custom images can hurt usability if they are low-contrast, oversized, or have a misplaced hotspot, so users click slightly off-target. Test against light and dark backgrounds.
  • cursor is inherited, so a value set on a container applies to its children unless they override it.
  • pointer-events — decide whether an element reacts to the pointer at all.
  • user-select — control whether text can be selected (pairs well with cursor: text / cursor: default).
  • :hover — change styles while the pointer is over an element.
  • caret-color — style the blinking text-input caret, a different "cursor" entirely.

Practice

Practice
What does the CSS 'cursor' property specify in web design?
What does the CSS 'cursor' property specify in web design?
Was this page helpful?