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>

Try it Yourself »

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>

Try it Yourself »

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>

Try it Yourself »

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.	Play it »
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 »
crosshair	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 »
alias	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.