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.


.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 »

Comments and Discussions!

Load comments ↻

Copyright © 2024 All rights reserved.