CSS Cursor Property
CSS Cursor is used to specify the mouse cursor to be displayed while pointing to an element. This property is defined with zero or more <url> values that are separated by commas followed by 1 keyword value as mandatory & each <url> will point to the image file.
Syntax:
cursor: value;
CSS Cursor Property Values
Here’s a more readable version of the cursor properties with a table-like structure for better clarity:
Cursor Property | Description |
---|---|
auto | The default cursor is where the browser automatically sets it. |
alias | Indicates that an alias (shortcut) is being created. |
all-scroll | Indicates that the entire element can be scrolled. |
cell | Indicates the user is selecting a cell or set of cells. |
context-menu | Suggests that a context menu is available. |
col-resize | Indicates that the column can be resized horizontally. |
copy | Shows that something is to be copied. |
crosshair | Displays a crosshair cursor. |
default | The default system cursor, typically an arrow. |
e-resize | Indicates that the edge of a box is to be moved to the right. |
ew-resize | Suggests a bidirectional resize left-right. |
help | Indicates that help or additional information is available. |
move | Used when something is draggable or can be moved. |
n-resize | Indicates that the edge of a box is to be moved upwards. |
ne-resize | The edge of a box is moved up and right. |
nesw-resize | Bidirectional resize in north-east and south-west directions. |
ns-resize | Suggests a bidirectional resize vertically (up-down). |
nw-resize | The edge of a box is moved up and left. |
nwse-resize | A bidirectional resize in north-west and south-east directions. |
no-drop | Indicates that a dragged item cannot be dropped here. |
none | No cursor is displayed. |
not-allowed | Indicates that the requested action cannot be executed. |
pointer | Represents a pointer, typically used for hyperlinks. |
progress | Indicates that the system is busy but interactive. |
row-resize | Shows that the row can be resized vertically. |
s-resize | Indicates that the edge of a box is to be moved downwards. |
se-resize | The edge of a box is moved down and right. |
sw-resize | The edge of a box is moved down and left. |
text | The text cursor indicates text that can be selected. |
URL | Allows custom cursors from a list of comma-separated URLs. |
vertical-text | Shows vertical text that can be selected. |
w-resize | Indicates that the edge of a box is to be moved left. |
wait | Suggests the system is busy and the user should wait. |
zoom-in | Indicates that something can be zoomed in. |
zoom-out | Indicates that something can be zoomed out. |
initial | Resets the cursor to its initial (default) value. |
inherit | The cursor is inherited from the parent element. |
Example: This example illustrates the use of the cursor property & its value is set to wait which indicates that the program is busy.
<!DOCTYPE html>
<html>
<head>
<title> CSS | cursor property </title>
<style>
.wait {
cursor: wait;
}
h1 {
color: green;
}
</style>
</head>
<body>
<center>
<h1>GeeksforGeeks</h1>
<p>Mouse over the words to change the mouse cursor.</p>
<p class="wait">wait</p>
</center>
</body>
</html>
Output:

Supported Browsers
- Google Chrome 1.0
- Microsoft Edge 12.0
- Mozilla Firefox 1.0
- IE 4.0
- Opera 7.0
- Safari1.2
Note: Keep in mind that some older versions of browsers, especially Internet Explorer, may not fully support all modern CSS properties and features. Testing for compatibility across multiple versions is recommended.
CSS Cursor Property FAQs
How do I customize my cursor in CSS?
You can customize your cursor using the cursor property in CSS, and set it to values like pointer, default, or even a custom image with url().
What is a hand cursor called?
The hand cursor is called pointer in CSS, commonly used for links and clickable elements.
Can we change cursor color in CSS?
No, you cannot directly change the cursor color in CSS. However, you can create a custom cursor using an image that includes your desired color.
When to use cursor pointer in CSS?
Use the cursor: pointer when you want to indicate that an element is clickable, such as buttons or links.
How to turn off the cursor in CSS?
You can turn off the cursor by setting cursor: none;, which will hide the cursor for the selected element.