CSS Property cursor

cursor defines the cursor shape.


Initial value auto
Inherited Yes.
Version CSS2
JavaScript syntax object.style.cursor="crosshair"
Applies to All elements.

CSS Syntax

cursor: url(address of cursor file) | 
        auto | 
        crosshair | 
        default | 
        pointer |   
        move | 
        e-resize | 
        ne-resize | 
        nw-resize | 
        n-resize | 
        se-resize |   
        sw-resize | 
        s-resize | 
        w-resize | 
        text | 
        wait | 
        help | 
        progress | 

Property Values

The property values are listed in the following table.

Value Description
URL A comma separated of URLs to load for custom cursors.
auto Default. The browser will choose a cursor
crosshair crosshair cursor
default default cursor
e-resize east edge resizable cursor
help help cursor
move movable cursor
n-resize north edge resizable cursor
ne-resize north/east edge resizable cursor
nw-resize north/west edge resizable cursor
pointer pointer cursor
progress busy cursor
s-resize south edge resizable cursor
se-resize south/east edge resizable cursor
sw-resize south/west edge resizable cursor
text text cursor
w-resize west edge resizable cursor
wait busy cursor
inherit inherit the cursor property from the parent element

Browser compatibility

cursor Yes Yes Yes Yes Yes


An example showing how to use cursor CSS property.

<!--from   w  w  w .j a v a2s  .  c  om-->
    <p>Move the mouse over the words to see the cursor change:</p>
    <span style="cursor:auto"> Auto</span><br />
    <span style="cursor:crosshair"> Crosshair</span><br />
    <span style="cursor:default"> Default</span><br />
    <span style="cursor:pointer"> Pointer</span><br />
    <span style="cursor:move"> Move</span><br />
    <span style="cursor:e-resize"> e-resize</span><br />
    <span style="cursor:ne-resize"> ne-resize</span><br />
    <span style="cursor:nw-resize"> nw-resize</span><br />
    <span style="cursor:n-resize"> n-resize</span><br />
    <span style="cursor:se-resize"> se-resize</span><br />
    <span style="cursor:sw-resize"> sw-resize</span><br />
    <span style="cursor:s-resize"> s-resize</span><br />
    <span style="cursor:w-resize"> w-resize</span><br />
    <span style="cursor:text"> text</span><br />
    <span style="cursor:wait"> wait</span><br />
    <span style="cursor:help"> help</span>


Click to view the demo