Examples of the CSS cursor Property

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

Return to the cursor property page.

Return to the cursor property page.

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 the cursor property page.

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 the cursor property page.

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 the cursor property page.

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 the cursor property page.

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 the cursor property page.

Custom Cursors

cursor: url(redball.gif);

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

Return to the cursor property page.

Discuss in my forum