CSS Cursor Property Values
This table provides a structured overview of each cursor property along with its description.
| Cursor Property | Description |
|---|---|
| auto | Default property where the browser sets a cursor. |
| alias | Indicates that something is to be created. |
| all-scroll | Indicates scrolling. |
| cell | Indicates a cell or set of cells are selected. |
| context-menu | Indicates that a context menu is available. |
| col-resize | Indicates that the column can be resized horizontally. |
| copy | Indicates something is to be copied. |
| crosshair | Renders as a crosshair. |
| default | Default cursor. |
| e-resize | Indicates an edge of a box is to be moved to the right. |
| ew-resize | Indicates a bidirectional resize cursor. |
| help | Indicates that help is available. |
| move | Indicates something is to be moved. |
| n-resize | Indicates an edge of a box is to be moved up. |
| ne-resize | Indicates an edge of a box is to be moved up and right. |
| nesw-resize | Indicates a bidirectional resize cursor. |
| ns-resize | Indicates a bidirectional resize cursor. |
| nw-resize | Indicates an edge of a box is to be moved up and left. |
| nwse-resize | Indicates a bidirectional resize cursor. |
| no-drop | Indicates that the dragged item cannot be dropped here. |
| none | Indicates no cursor is rendered for the element. |
| not-allowed | Indicates that the requested action will not be executed. |
| pointer | Indicates a link. |
| progress | Indicates that the program is busy. |
| row-resize | Indicates that the row can be resized vertically. |
| s-resize | Indicates an edge of a box is to be moved down. |
| se-resize | Indicates an edge of a box is to be moved down and right. |
| sw-resize | Indicates an edge of a box is to be moved down and left. |
| text | Indicates text that may be selected. |
| URL | Comma-separated list of URLs to custom cursors. |
| vertical-text | Indicates vertical-text that may be selected. |
| w-resize | Indicates an edge of a box is to be moved left. |
| wait | Indicates that the program is busy. |
| zoom-in | Indicates that something can be zoomed in. |
| zoom-out | Indicates that something can be zoomed out. |
| initial | Sets to its default value. |
| inherit | Inherits from its 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>w3wiki</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
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.