1. Home
  2. Computing & Technology
  3. Web Design / HTML

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
Explore Web Design / HTML
About.com Special Features

The Best Web Trends of the Decade

A look back at the best innovations, ideas and technologies over the last 10 years, More >

Family Tech Center

Stay connected and entertained with reviews on tips on the latest HDTVs, cellphones and more. More >

  1. Home
  2. Computing & Technology
  3. Web Design / HTML

©2010 About.com, a part of The New York Times Company.

All rights reserved.