CSS cursor Property

The cursor property specifies the mouse cursor that will be displayed when a user points to an element. This property is defined by zero or more url values separated by commas, followed by one mandatory keyword value, and each url will point to the image file.

Syntax

cursor: value;

Example

<!DOCTYPE html>
<html>
<head>
<style>
    .alias {cursor: alias;}
    .all-scroll {cursor: all-scroll;}
    .auto {cursor: auto;}
    .cell {cursor: cell;}
    .context-menu {cursor: context-menu;}
    .col-resize {cursor: col-resize;}
    .copy {cursor: copy;}
    .crosshair {cursor: crosshair;}
    .default {cursor: default;}
    .e-resize {cursor: e-resize;}
    .ew-resize {cursor: ew-resize;}
    .grab {cursor: -webkit-grab; cursor: grab;}
    .grabbing {cursor: -webkit-grabbing; cursor: grabbing;}
    .help {cursor: help;}
    .move {cursor: move;}
    .n-resize {cursor: n-resize;}
    .ne-resize {cursor: ne-resize;}
    .nesw-resize {cursor: nesw-resize;}
    .ns-resize {cursor: ns-resize;}
    .nw-resize {cursor: nw-resize;}
    .nwse-resize {cursor: nwse-resize;}
    .no-drop {cursor: no-drop;}
    .none {cursor: none;}
    .not-allowed {cursor: not-allowed;}
    .pointer {cursor: pointer;}
    .progress {cursor: progress;}
    .row-resize {cursor: row-resize;}
    .s-resize {cursor: s-resize;}
    .se-resize {cursor: se-resize;}
    .sw-resize {cursor: sw-resize;}
    .text {cursor: text;}
    .url {cursor: url('https://webtutor.dev/images/custom.cur'),auto;}
    .w-resize {cursor: w-resize;}
    .wait {cursor: wait;}
    .zoom-in {cursor: zoom-in;}
    .zoom-out {cursor: zoom-out;}
</style>
</head>
<body>

<p>Mouse over the words to change the mouse cursor.</p>

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

</body>
</html>

Preview

Property Values

Value	Description
alias	The cursor indicates that an alias is about to be created.
all-scroll	The presence of a cursor indicates that something can be moved in any direction.
auto	Default. The browser places a cursor on the screen.
cell	The cursor indicates that a cell (or group of cells) can be chosen.
context-menu	The presence of a cursor indicates the presence of a context-menu.
col-resize	The cursor indicates that the column can be horizontally resized.
copy	The presence of the cursor indicates that something is about to be copied.
crosshair	The cursor is displayed as a crosshair.
default	The standard cursor.
e-resize	The cursor indicates that a box's right edge should be moved (east).
ew-resize	This symbol represents a bidirectional resize cursor.
grab	The cursor indicates that something is available for grab.
grabbing	The cursor indicates that something is available for grab.
help	The presence of a cursor indicates that assistance is available.
move	The cursor indicates that something should be moved.
n-resize	The cursor indicates that a box's edge should be moved up (north).
ne-resize	The cursor indicates that a box's edge should be moved up and right (north/east).
nesw-resize	This symbol represents a bidirectional resize cursor.
ns-resize	This symbol represents a bidirectional resize cursor.
nw-resize	The cursor indicates that a box's edge should be moved up and left (north/west).
nwse-resize	This symbol represents a bidirectional resize cursor.
no-drop	The cursor indicates that the item being dragged cannot be dropped here.
none	For the element, no cursor is rendered.
not-allowed	The presence of the cursor indicates that the requested action will not be carried out.
pointer	The cursor is a pointer that represents a link.
progress	The presence of a cursor indicates that the programme is in use (in progress).
row-resize	The cursor indicates that the row can be vertically resized.
s-resize	The cursor indicates that a box's edge should be moved down (south).
se-resize	The cursor indicates that a box's edge should be moved down and right (south/east).
sw-resize	The cursor indicates that a box's edge should be moved down and left (south/west).
text	The cursor represents text that can be selected.
URL	A list of URLs to custom cursors separated by commas. Note: If none of the URL-defined cursors can be used, always specify a generic cursor at the end of the list.
vertical-text	The cursor represents vertical text that can be selected.
w-resize	The cursor indicates that a box's left edge is to be moved (west).
wait	The presence of a cursor indicates that the programme is in use.
zoom-in	The presence of a cursor indicates that something can be zoomed in on.
zoom-out	The presence of a cursor indicates that something can be zoomed out.
initial	This property is set to its default value.
inherit	This property is inherited from its parent element.

Supported Browsers

Element	Chrome	Firefox	Safari	Edge / IE	Opera
cursor	5.0	4.0	5.1	5.5	9.6

counter-reset

direction

CSS cursor Property

Syntax

Example

Property Values

Supported Browsers

Links

Tutorials

Connect with us