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. | 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. |
Browser support
1.0+ | 12.0+ | 1.0+ | 1.2+ | 7.0+ |
Practice Your Knowledge
What does the CSS 'cursor' property specify in web design?
Correct!
Incorrect!
Quiz Time: Test Your Skills!
Ready to challenge what you've learned? Dive into our interactive quizzes for a deeper understanding and a fun way to reinforce your knowledge.