CSS cursor Property

The cursor property defines the type of mouse cursor when the mouse pointer is over the element.

The cursor is defined as zero or more comma-separated <url> values, followed by a keyword value. Each of these <url>s must indicate an image file. The browser will fall back to the next image if it can’t load up the first specified image. If the browser can’t find any image, it will fall back to the keyword value.

The -webkit- property extension is added to show some values for Safari, Google Chrome, and Opera (newer versions).
Initial Value auto
Applies to All elements.
Inherited Yes.
Animatable No.
Version CSS2
DOM Syntax object.style.cursor = "cell";

Syntax

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 of the cursor property:

<!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>

Here is an example with all the values of cursor property. The -webkit- extention is added for "zoom-in", "zoom-out", "grab" and "grabbing" values.

Example of the cursor property property with the "zoom-in", "zoom-out", "grab" and "grabbing" 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: -webkit-grab; cursor: grab; }
      .grabbing {
      cursor:  -webkit-grabbing; cursor: grabbing; }
      .zoom-in { 
      cursor: -webkit-zoom-in; cursor: zoom-in; }
      .zoom-out {
      cursor:  -webkit-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>

Example of the cursor property with the "url" value:

<!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>

Values

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


Browser support

1.0+ 12.0+ 1.0+ 1.2+ 7.0+


Do you find this helpful?

Related articles