CSS Cursor Property

The CSS cursor property allows you to define the type of cursor displayed when hovering over an element. This reference provides an overview of different cursor styles and their visual representations.

Code Example

To change the cursor style in CSS, use the cursor property. Below is an example: 

.class {
  cursor: pointer;
}

See It in Action

Hover below to see different cursor styles in action:

Alias

cursor: alias;

All Scroll

cursor: all-scroll;

Auto

cursor: auto;

Cell

cursor: cell;

Column Resize

cursor: col-resize;

Context Menu

cursor: context-menu;

Copy

cursor: copy;

Crosshair

cursor: crosshair;

Default

cursor: default;

East Resize

cursor: e-resize;

EW Resize

cursor: ew-resize;

Grab

cursor: grab;

Grabbing

cursor: grabbing;

Help

cursor: help;

Move

cursor: move;

North 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;

South Resize

cursor: s-resize;

SE Resize

cursor: se-resize;

SW Resize

cursor: sw-resize;

Text

cursor: text;

URL

cursor: url(...), auto;

West Resize

cursor: w-resize;

Wait

cursor: wait;

Zoom In

cursor: zoom-in;

Zoom Out

cursor: zoom-out;