Cursor

The cursor property is used to define the type of mouse cursor when the mouse pointer is over the element.

CSS Syntax

cursor: value;

Let's see an example:

Please use the button "Click and Try it yourself" to see the results of example:

<!DOCTYPE html>
<html>
<head>
   <style>
      li {list-style:none}
      .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; }
     .zoom-in { cursor: zoom-in; }
     .zoom-out { cursor: zoom-out; }
   </style>
</head>
<body>

  <h2>Take the mouse pointer over words below to see different cursors.</h2>

  <ul>
    <li class="auto">auto</li>
    <li class="default">default</li>
    <li class="none">none</li>
    <li class="context-menu">context-menu</li>
    <li class="help">help</li>
    <li class="pointer">pointer</li>
    <li class="progress">progress</li>
    <li class="wait">wait</li>
    <li class="cell">cell</li>
    <li class="crosshair">crosshair</li>
    <li class="text">text</li>
    <li class="vertical-text">vertical-text</li>
    <li class="alias">alias</li>
    <li class="copy">copy</li>
    <li class="move">move</li>
    <li class="no-drop">no-drop</li>
    <li class="not-allowed">not-allowed</li>
    <li class="all-scroll">all-scroll</li>
    <li class="col-resize">col-resize</li>
    <li class="row-resize">row-resize</li>
    <li class="n-resize">n-resize</li>
    <li class="s-resize">s-resize</li>
    <li class="e-resize">e-resize</li>
    <li class="w-resize">w-resize</li>
    <li class="ns-resize">ns-resize</li>
    <li class="ew-resize">ew-resize</li>
    <li class="ne-resize">ne-resize</li>
    <li class="nw-resize">nw-resize</li>
    <li class="se-resize">se-resize</li>
    <li class="sw-resize">sw-resize</li>
    <li class="nesw-resize">nesw-resize</li>
    <li class="nwse-resize">nwse-resize</li>
    <li class="zoom-in">zoom-in</li>
    <li class="zoom-out">zoom-out</li>
  </ul>

</body>
</html>

Property Values

Value Descriptions
alias It means that the cursor will indicate an alias of something is to be created.
all-scroll It means that the cursor will indicate something can be scrolled in any direction.
auto It means that the browser will set a cursor. It is the default value of this property.
cell It means that the cursor will indicate that a cell or set of cells may be selected.
context-menu The cursor indicates that a context-menu is available.
col-resize The cursor indicates that the column can be resized horizontally.
copy The cursor indicates something which can be copied.
crosshair The cursor will be rendered as a crosshair.
default It is the default cursor.
e-resize The cursor indicates that an edge of a box is to be moved right.
ew-resize The cursor indicates bidirectional resize cursor.
grab The cursor indicates that something can be grabbed.
grabbing The cursor indicates that something can be grabbed.
help The cursor indicates that help is available.
move The cursor indicates that something can be moved.
n-resize The cursor indicates that an edge of a box is to be moved up.
ne-resize The cursor indicates that an edge of a box is to be moved up and right.
nesw-resize The cursor indicates a bidirectional resize cursor.
ns-resize The cursor indicates a bidirectional resize cursor.
nw-resize The cursor indicates that an edge of a box is to be moved up and left.
nwse-resize The cursor indicates a bidirectional resize cursor.
no-drop The cursor indicates that the dragged item cannot be dropped here.
none It means that there is no cursor rendered for the element.
not-allowed The cursor indicates that the requested action will not be executed.
pointer The cursor indicates a link as a pointer.
progress The cursor indicates that program is busy or in progress.
row-resize The cursor indicates that the row can be resized vertically.
s-resize The cursor indicates that an edge of a box is to be moved down.
se-resize The cursor indicates that an edge of a box is to be moved down and right.
sw-resize The cursor indicates that an edge of a box is to be moved down and left.
text The cursor indicates text which may be selected.
URL A comma separated list of URLs to custom cursors..
vertical-text The cursor indicates vertical text which can be selected.
w-resize The cursor indicates that an edge of a box is to be moved left.
w-resize The cursor indicates that the program is busy.
zoom-in The cursor indicates that something can be zoomed in.
zoom-out The cursor indicates that something can be zoomed out.
initial It makes the property use its default value.
inherit It inherits the property from its parents element.