Different Types of Cursors in CSS


CSS cursor property is used to change the cursor type when the mouse pointer is over an element. Cursors are used to specify possible actions that can be performed on an element.

For example when you hover over a link, the cursor changes to a hand. This is because the cursor property is set to pointer.

Default property:auto
Version:CSS 2,3
Animation:no
Applies to:all element
Inherited:Yes

Different Types of Cursor Values

There are many different types of cursor values. Take your mouse pointer over these buttons and see how the pointer changes.

Following table shows the cursor property values and their corresponding cursors.

ValueCursor (hover your mouse on buttons below)
autoauto
defaultdefault
nonenone
initialinitial
inheritinherit
context-menucontext-menu
helphelp
pointerpointer
progressProgress
waitwait
cellcell
crosshaircrosshair
texttext
vertical-textvertical-text
aliasalias
copycopy
movemove
no-dropno-drop
not-allowednot-allowed
all-scrollall-scroll
col-resizecol-resize
row-resizerow-resize
n-resizen-resize
e-resizee-resize
s-resizes-resize
w-resizew-resize
ne-resizene-resize
nw-resizenw-resize
se-resizese-resize
sw-resizesw-resize
ew-resizeew-resize
ns-resizens-resize
nesw-resizenesw-resize
nwse-resizenwse-resize
zoom-inzoom-in
zoom-outzoom-out
grabgrab
grabbinggrabbing

Here is an example:

Example

<span style=cursor:auto;>auto</span>
<span style=cursor:default;>default</span>
<span style=cursor:none;>none</span>
<span style=cursor:initial;>initial</span>
<span style=cursor:inherit;>inherit</span>
<span style=cursor:context-menu;>context-menu</span>
<span style=cursor:help;>help</span>
<span style=cursor:pointer;>pointer</span>
<span style=cursor:progress;>progress</span>
<span style=cursor:wait;>wait</span>
<span style=cursor:cell;>cell</span>
<span style=cursor:crosshair;>crosshair</span>
<span style=cursor:text;>text</span>
<span style=cursor:vertical-text;>vertical-text</span>
<span style=cursor:alias;>alias</span>
<span style=cursor:copy;>copy</span>
<span style=cursor:move;>move</span>
<span style=cursor:no-drop;>no-drop</span>
<span style=cursor:not-allowed;>not-allowed</span>
<span style=cursor:all-scroll;>all-scroll</span>
<span style=cursor:col-resize;>col-resize</span>
<span style=cursor:row-resize;>row-resize</span>
<span style=cursor:n-resize;>n-resize</span>
<span style=cursor:e-resize;>e-resize</span>
<span style=cursor:s-resize;>s-resize</span>
<span style=cursor:w-resize;>w-resize</span>
<span style=cursor:ne-resize;>ne-resize</span>
<span style=cursor:nw-resize;>nw-resize</span>
<span style=cursor:se-resize;>se-resize</span>
<span style=cursor:se-resize;>sw-resize</span>
<span style=cursor:ew-resize;>ew-resize</span>
<span style=cursor:ns-resize;>ns-resize</span>
<span style=cursor:nesw-resize;>nesw-resize</span>
<span style=cursor:nwse-resize;>nwse-resize</span>
<span style=cursor:zoom-in;>zoom-in</span>
<span style=cursor:zoom-out;>zoom-out</span>
<span style=cursor:grab;>grab</span>
<span style=cursor:grabbing;>grabbing</span>
Try it