CSS cursor Property

CSS cursor property specifies the type of mouse cursor for an element when we hover over it.

Hover over the below boxes to see their cursor type:

Hover Over Me
Hover Over Me
Hover Over Me
Hover Over Me
Hover Over Me

Try out the example below:


  cursor: default;
  cursor: progress;
 cursor: not-allowed;

It is also possible to use an image as a mouse cursor. If the specified image is not found, the browser uses the default cursor.

In the example below we have used ‘center.svg’ image as a cursor type. If this image is not available, the browser will use pointer type cursor as a fallback. Try it out to see how it works:


  cursor: url('images/center.svg'), pointer;

Try out the below example to see all cursor types available in CSS:


p.alias {cursor: alias;}
p.all-scroll {cursor: all-scroll;}
p.auto {cursor: auto;}
p.cell {cursor: cell;}
p.context-menu {cursor: context-menu;}
p.col-resize {cursor: col-resize;}
p.copy {cursor: copy;}
p.crosshair {cursor: crosshair;}
p.default {cursor: default;}
p.e-resize {cursor: e-resize;}
p.ew-resize {cursor: ew-resize;}
p.grab {cursor: grab;}
p.grabbing {cursor: grabbing;}
p.help {cursor: help;}
p.move {cursor: move;}
p.n-resize {cursor: n-resize;}
p.ne-resize {cursor: ne-resize;}
p.nesw-resize {cursor: nesw-resize;}
p.ns-resize {cursor: ns-resize;}
p.nw-resize {cursor: nw-resize;}
p.nwse-resize {cursor: nwse-resize;}
p.no-drop {cursor: no-drop;}
p.none {cursor: none;}
p.not-allowed {cursor: not-allowed;}
p.pointer {cursor: pointer;}
p.progress {cursor: progress;}
p.row-resize {cursor: row-resize;}
p.s-resize {cursor: s-resize;}
p.se-resize {cursor: se-resize;}
p.sw-resize {cursor: sw-resize;}
p.text {cursor: text;}
p.w-resize {cursor: w-resize;}
p.wait {cursor: wait;}
p.zoom-in {cursor: zoom-in;}
p.zoom-out {cursor: zoom-out;}

CSS Syntax

The cursor property has the following syntax:

cursor: none|auto|cursor_type|url|initial|inherit;

Property Values

The cursor property accepts the following values:

noneSpecifies no cursor. The cursor remains hidden.
autoDefault value. The browser itself sets the cursor.
aliasIt shows an alias or shortcut
all-scrollIt shows that scrolling can be done in any side.
cellIt shows that a table cell can be selected.
context-menuIt indicates that the context-menu is available.
col-resizeIt indicates that an element can be resized horizontally.
copyIt indicates that something can be copied.
crosshairIt shows a crosshair cursor.
defaultIt shows a platform-dependent default cursor. Generally an arrow.
e-resizeIt shows a horizontal resize towards the east(right) direction.
ew-resizeIt indicates that the item can be resized towards the east-west.
grabIt indicates that something is to be grabbed.
grabbingIt indicates that something is being grabbed.
helpIt indicates that help about the current item is available.
moveIt indicates that something is to be moved.
n-resizeIt shows a vertical resize towards the north(top) direction.
ne-resizeIt indicates that the item can be resized towards the north-east.
nesw-resizeIt indicates bidirectional resize.
ns-resizeIt indicates that the item can be resized towards the north-south(vertical).
nw-resizeIt indicates that the item can be resized in the north-west direction.
nwse-resizeIt indicates bidirectional resize.
no-dropIt indicates that the item can not be dropped at the current location.
not-allowedIt indicates that the requested action can not be carried out.
pointerIt indicates a pointer cursor and generally used for hovering over links.
progressIt indicates that the action is still in progress.
row-resizeIt indicates that the item can be resized vertically.
s-resizeIt indicates a vertically down resize(south).
se-resizeIt indicates that the item can be resized towards the south-east.
sw-resizeIt indicates that the item can be resized towards the south-west.
textThis cursor is used to hover over a text.
vertical-textIt indicates that the text can be selected vertically.
w-resizeIt indicates a horizontal resize towards the west(left) direction.
waitIt indicates that the program is still not completed and it’s running in the background.
zoom-inIt indicates that the item can be zoomed-in.
zoom-outIt indicates that the item can be zoomed-out.
url(source)It sets the given image as the mouse cursor.
initialSets the cursor property to its default value(auto).
inheritInherits the cursor property from the parent element.

General Info

Default Valueauto
JavaScript Usageelement.style.cursor= “pointer”


  • Manoj Kumar

    Hi, My name is Manoj Kumar. I am a full-stack developer with a passion for creating robust and efficient web applications. I have hands-on experience with a diverse set of technologies, including but not limited to HTML, CSS, JavaScript, TypeScript, Angular, Node.js, Express, React, and MongoDB.

    View all posts

Leave a Comment