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.
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>
cursor: value;
| 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. |
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>
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 |
