Examples of the CSS Property cursor

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 cursors are supported.

Return to cursor Information

Return to cursor Information

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>

Return to cursor Information

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>

Return to cursor Information

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>

Return to cursor Information

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>

Return to cursor Information

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>

Return to cursor Information

Fancy Cursors

cursor: url(redball.gif);

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

Return to cursor Information

Jennifer Kyrnin