CSS cursor Property

CSS cursor property specifies the type of mouse cursor for an element when we hover over it.

Hover over the below boxes to see their cursor type:

Try out the example below:

Example:

p.default{
  cursor: default;
}
p.progress{
  cursor: progress;
}
p.not-allowed{
 cursor: not-allowed;
}

It is also possible to use an image as a mouse cursor. If the specified image is not found, the browser uses the default cursor.

In the example below we have used ‘center.svg’ image as a cursor type. If this image is not available, the browser will use pointer type cursor as a fallback. Try it out to see how it works:

Example:

p{
  cursor: url('images/center.svg'), pointer;
}

Try out the below example to see all cursor types available in CSS:

Example:

p.alias {cursor: alias;}
p.all-scroll {cursor: all-scroll;}
p.auto {cursor: auto;}
p.cell {cursor: cell;}
p.context-menu {cursor: context-menu;}
p.col-resize {cursor: col-resize;}
p.copy {cursor: copy;}
p.crosshair {cursor: crosshair;}
p.default {cursor: default;}
p.e-resize {cursor: e-resize;}
p.ew-resize {cursor: ew-resize;}
p.grab {cursor: grab;}
p.grabbing {cursor: grabbing;}
p.help {cursor: help;}
p.move {cursor: move;}
p.n-resize {cursor: n-resize;}
p.ne-resize {cursor: ne-resize;}
p.nesw-resize {cursor: nesw-resize;}
p.ns-resize {cursor: ns-resize;}
p.nw-resize {cursor: nw-resize;}
p.nwse-resize {cursor: nwse-resize;}
p.no-drop {cursor: no-drop;}
p.none {cursor: none;}
p.not-allowed {cursor: not-allowed;}
p.pointer {cursor: pointer;}
p.progress {cursor: progress;}
p.row-resize {cursor: row-resize;}
p.s-resize {cursor: s-resize;}
p.se-resize {cursor: se-resize;}
p.sw-resize {cursor: sw-resize;}
p.text {cursor: text;}
p.w-resize {cursor: w-resize;}
p.wait {cursor: wait;}
p.zoom-in {cursor: zoom-in;}
p.zoom-out {cursor: zoom-out;}

CSS Syntax

The cursor property has the following syntax:

cursor: none|auto|cursor_type|url|initial|inherit;

Property Values

The cursor property accepts the following values:

General Info