CSS cursor Property Examples

See How the Cursor Changes

Put your mouse over the following links to see how the cursor changes. Be sure to test in different browsers, as not all CSS cursor typess are supported.

• Default Cursors
• Basic Cursors
• Text Cursors
• Resize Cursors
• Table Cursors
• Custom Cursors

Default Cursors

No change to the cursor

<a href="">No change to the cursor</a>

cursor: auto;

<a href="" style="cursor: auto;">cursor: auto;</a>

cursor: default;

<a href="" style="cursor: default;">cursor: default;</a>

cursor: none;

<a href="" style="cursor: none;">cursor: none;</a>

Basic Cursors

cursor: help;

<a href="" style="cursor: help;">cursor: help;</a>

cursor: pointer;

<a href="" style="cursor: pointer;">cursor: pointer;</a>

cursor: progress;

<a href="" style="cursor: progress;">cursor: progress;</a>

cursor: wait;

<a href="" style="cursor: wait;">cursor: wait;</a>

cursor: crosshair;

<a href="" style="cursor: crosshair;">cursor: crosshair;</a>

Text Cursors

cursor: text;

<a href="" style="cursor: text;">cursor: text;</a>

cursor: vertical-text;

<a href="" style="cursor: vertical-text;">cursor: vertical-text;</a>

cursor: alias;

<a href="" style="cursor: alias;">cursor: alias;</a>

cursor: copy;

<a href="" style="cursor: copy;">cursor: copy;</a>

cursor: move;

<a href="" style="cursor: move;">cursor: move;</a>

cursor: no-drop;

<a href="" style="cursor: no-drop;">cursor: no-drop;</a>

cursor: not-allowed;

<a href="" style="cursor: not-allowed;">cursor: not-allowed;</a>

Resize Cursors

cursor: e-resize;

<a href="" style="cursor: e-resize;">cursor: e-resize;</a>

cursor: n-resize;

<a href="" style="cursor: n-resize;">cursor: n-resize;</a>

cursor: ne-resize;

<a href="" style="cursor: ne-resize;">cursor: ne-resize;</a>

cursor: nw-resize;

<a href="" style="cursor: nw-resize;">cursor: nw-resize;</a>

cursor: s-resize;

<a href="" style="cursor: s-resize;">cursor: s-resize;</a>

cursor: se-resize;

<a href="" style="cursor: se-resize;">cursor: se-resize;</a>

cursor: sw-resize;

<a href="" style="cursor: sw-resize;">cursor: sw-resize;</a>

cursor: w-resize;

<a href="" style="cursor: w-resize;">cursor: w-resize;</a>

cursor: ew-resize;

<a href="" style="cursor: ew-resize;">cursor: ew-resize;</a>

cursor: ns-resize;

<a href="" style="cursor: ns-resize;">cursor: ns-resize;</a>

cursor: nesw-resize;

<a href="" style="cursor: nesw-resize;">cursor: nesw-resize;</a>

cursor: nwse-resize;

<a href="" style="cursor: nwse-resize;">cursor: nwse-resize;</a>

Table Cursors

cursor: context-menu;

<a href="" style="cursor: context-menu;">cursor: context-menu;</a>

cursor: cell;

<a href="" style="cursor: cell;">cursor: cell;</a>

cursor: col-resize;

<a href="" style="cursor: col-resize;">cursor: col-resize;</a>

cursor: row-resize;

<a href="" style="cursor: row-resize;">cursor: row-resize;</a>

cursor: all-scroll;

<a href="" style="cursor: all-scroll;">cursor: all-scroll;</a>

Custom Cursors

cursor: url(redball.gif);

<a href="" style="cursor: url(redball.cur),default;">cursor: url(redball.cur);</a>