CSS cursor Property

Example

CSS can generate a bunch of different mouse cursors:

.alias {cursor: alias;}
.all-scroll {cursor: all-scroll;}
.auto {cursor: auto;}
.cell {cursor: cell;}
.col-resize {cursor: col-resize;}
.context-menu {cursor: context-menu;}
.copy {cursor: copy;}
.crosshair {cursor: crosshair;}
.default {cursor: default;}
.e-resize {cursor: e-resize;}
.ew-resize {cursor: ew-resize;}
.grab {cursor: grab;}
.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(smiles.png),auto;}
.w-resize {cursor: w-resize;}
.wait {cursor: wait;}
.zoom-in {cursor: zoom-in;}
.zoom-out {cursor: zoom-out;}

Definition and Usage

The cursor property specifies the mouse cursor to be displayed when pointing over an element.

Default value:	auto
Inherited:	yes
Animatable:	no.
Version:	CSS2
JavaScript syntax:	object.style.cursor="crosshair"

• Inherited : "Inherited = yes" means that it can takes (inherit) it's value from it's parent element.
• object - object in javascript means the element on which cursor is applied.
• Animatable - "Animatable = no" means that it cannot be animated with CSS @keyframes.

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Property
cursor	5.0	5.5	4.0	5.0	9.6

CSS Syntax

cursor: value;

Property Values

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