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

This page exists because at one point I couldn't find a site that made it easy to see all of the different cursor styles in one place.

Hover below to see different cursor styles in action:

cursor: alias;

cursor: all-scroll;

cursor: auto;

cursor: cell;

cursor: col-resize;

cursor: context-menu;

cursor: copy;

cursor: crosshair;

cursor: default;

cursor: e-resize;

cursor: ew-resize;

cursor: grab;

cursor: grabbing;

cursor: help;

cursor: move;

cursor: n-resize;

cursor: ne-resize;

cursor: nesw-resize;

cursor: ns-resize;

cursor: nw-resize;

cursor: nwse-resize;

cursor: no-drop;

cursor: none;

cursor: not-allowed;

cursor: pointer;

cursor: progress;

cursor: row-resize;

cursor: s-resize;

cursor: se-resize;

cursor: sw-resize;

cursor: text;

cursor: url(...), auto;

cursor: w-resize;

cursor: wait;

cursor: zoom-in;

cursor: zoom-out;