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.