Home » CSS

Values for the CSS cursor property

Learn about the CSS cursor property, and values for the CSS cursor property.
Submitted by Shahnail Khan, on March 12, 2022

Many CSS properties are put to use to make the website user-friendly. For example- we can define a property for a user pointing over an element, the cursor changes from default to the value set by the CSS cursor property. Let's go through the CSS cursor property and the values accepted by this property.

What is the CSS cursor property?

It defines a cursor for a user placing a mouse pointer over a particular element. The default value is auto, displaying the cursor set by the browser.

Syntax:

.class name {
    cursor: value; /*it accepts only defined property values*/
}

CSS cursor Property Values

Value	Explanation
alias	Displays cursor that specifies an alternative name(alias) must be given to an element.
all-scroll	Displays cursor that specifies scrolling website.
auto	The default value, the cursor is set by the browser.
cell	Displays cursor that specifies selecting of table cells.
context- menu	Displays cursor that specifies that a context- menu is available.
col-resize	Displays cursor that specifies resizing of column horizontally.
copy	Displays cursor that specifies something is to be copied.
crosshair	Displays cursor which looks like a plus sign, indicating selection in a bitmap.
e-resize	Displays cursor that specifies moving an edge of the box to the right.
ew-resize	Displays cursor which indicates bidirectional resizing is possible.
grab/ grabbing	Displays cursor which indicates something can be grabbed.
help	Displays cursor that specifies a help menu is available.
move	Displays cursor which indicates something need to be moved from one location to another.
n-resize	Displays cursor which specifies moving an edge of a box to upward direction.
nesw-resize / ns-resize	Indicates a bidirectional resize cursor.
no-drop	Specifies no dropping of the dragged items on a particular location.
not-allowed	Specifies the requested action by the user is invalid.
pointer	A typical arrow.
progress/ wait	Displays a cursor that indicates the requested action by the user is loading.
row-resize	This cursor indicates row can be resized vertically.
s-resize	Displays a cursor that specifies moving an edge of the box downwards.
sw-resize	Indicates an edge of the box to be moved down & left.
text	Displays a cursor that specifies user can enter any text.
zoom-in	Displays a cursor that specifies zooming in of an element
zoom-out	Specifies zooming out of an element.

CSS Tutorial & Examples »

---