Earn income with your CSS skills
Sign up and we'll send you the best freelance opportunities straight to your inbox.
We're building the largest self-service freelancing marketplace for people like you.

CSS cursor Property

The cursor property defines a mouse cursor for an element.

The cursor value can be a keyword or an image.

The cursor appears when the pointer hovers over the element.

Example

#

Hover over the table below and see a custom cursor for each cell.

alias all-scroll auto cell context-menu col-resize
copy crosshair default e-resize ew-resize grab
grabbing help move n-resize ne-resize nesw-resize
ns-resize nw-resize nwse-resize no-drop none not-allowed
pointer progress row-resize s-resize se-resize sw-resize
text URL vertical-text wait zoom-in zoom-out
<style>
  .cursor-value-table {
    width: 100%;
  }

  .cursor-value-table td {
    border: solid 1px #bfbfbf;
    padding: 10px;
    text-align: center;
  }

  .cursor-value-table td:hover {
    background-color: #f1f9fa;
  }
</style>

<table class="cursor-value-table" cellspacing="0">
  <tr>
    <td style="cursor:alias">alias</td>
    <td style="cursor:all-scroll">all-scroll</td>
    <td style="cursor:auto">auto</td>
    <td style="cursor:cell">cell</td>
    <td style="cursor:context-menu">context-menu</td>
    <td style="cursor:col-resize">col-resize</td>
  </tr>
  <tr>
    <td style="cursor:copy">copy</td>
    <td style="cursor:crosshair">crosshair</td>
    <td style="cursor:default">default</td>
    <td style="cursor:e-resize">e-resize</td>
    <td style="cursor:ew-resize">ew-resize</td>
    <td style="cursor:grab">grab</td>
  </tr>
  <tr>
    <td style="cursor:grabbing">grabbing</td>
    <td style="cursor:help">help</td>
    <td style="cursor:move">move</td>
    <td style="cursor:n-resize">n-resize</td>
    <td style="cursor:ne-resize">ne-resize</td>
    <td style="cursor:nesw-resize">nesw-resize</td>
  </tr>
  <tr>
    <td style="cursor:ns-resize">ns-resize</td>
    <td style="cursor: nw-resize">nw-resize</td>
    <td style="cursor:nwse-resize">nwse-resize</td>
    <td style="cursor:no-drop">no-drop</td>
    <td style="cursor:none">none</td>
    <td style="cursor:not-allowed">not-allowed</td>
  </tr>
  <tr>
    <td style="cursor:pointer">pointer</td>
    <td style="cursor:progress">progress</td>
    <td style="cursor:row-resize">row-resize</td>
    <td style="cursor:s-resize">s-resize</td>
    <td style="cursor:se-resize">se-resize</td>
    <td style="cursor:sw-resize">sw-resize</td>
  </tr>
  <tr>
    <td style="cursor:text">text</td>
    <td style="cursor:url(/img/css/circle.png), auto">URL</td>
    <td style="cursor:vertical-text">vertical-text</td>
    <td style="cursor:wait">wait</td>
    <td style="cursor:zoom-in">zoom-in</td>
    <td style="cursor:zoom-out">zoom-out</td>
  </tr>
</table>

Syntax

cursor: value;

Values

#

Value Description
alias Cursor alias
all-scroll Scrolled in any direction
auto Default, sets cursor
cell Sndicates cursor that a cell (or set of cells) may be selected
context-menu Sets cursor that a context-menu is available
col-resize Cursor sets that the column can be resized horizontally
copy Cursor sets something is to be copied
crosshair Renders cursor as a crosshair
default Default cursor
e-resize Cursor sets that an edge of a box is to be moved right (east)
ew-resize Sets a bidirectional resize cursor
grab Cursor sets that something can be grabbed
grabbing Cursor sets that something can be grabbed
help Cursor sets that help is available
move Cursor sets that something is to be moved
n-resize Cursor sets that an edge of a box is to be moved up (north)
ne-resize Cursor sets that an edge of a box is to be moved up and right (north/east)
nesw-resize Sets bidirectional resize cursor
ns-resize Sets bidirectional resize cursor
nw-resize Cursor sets that an edge of a box is to be moved up and left (north/west)
nwse-resize Sets bidirectional resize cursor
no-drop Cursor sets that the dragged item cannot be dropped here
none No cursor is rendered for the element
not-allowed Cursor sets that the requested action will not be executed
pointer Cursor is set as pointer and indicates a link
progress Cursor sets that the program is busy (in progress)
row-resize Cursor sets that the row can be resized vertically
s-resize Cursor sets that an edge of a box is to be moved down (south)
se-resize Cursor sets that an edge of a box is to be moved down and right (south/east)
sw-resize Cursor sets that an edge of a box is to be moved down and left (south/west)
text Cursor sets text that may be selected
URL Comma separated list of URLs to custom cursors
vertical-text Cursor sets vertical-text that may be selected
w-resize Cursor sets that an edge of a box is to be moved left (west)
wait Cursor sets that the program is busy
zoom-in Cursor sets that something can be zoomed in
zoom-out Cursor sets that something can be zoomed out
initial Sets the value to its default value.
inherit Inherits the value from its parent element.

Did you know?

Did you know?

Using an image as the cursor

A custom cursor can be created with an image file.

Hover the text below and a custom image cursor (orange ball) will show.

Hover this paragraph to see the image cursor.

<p style="cursor: url(/img/css/circle.png), auto">
  Hover this paragraph to see the image cursor.
</p>

Browser support

This table shows when cursor support started for each browser.

Chrome
5.0 May 2010
Firefox
4.0 Mar 2011
IE/Edge
5.5 Jul 2000
Opera
9.6 Oct 2008
Safari
5.0 Jun 2010

You may also like

Earn income with your CSS skills
Sign up and we'll send you the best freelance opportunities straight to your inbox.
We're building the largest self-service freelancing marketplace for people like you.

Guides