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.

Try It:

Default

Pointer

Progress

Wait

Text

Crosshair

Move

Not Allowed

East Resize

North East Resize

North West Resize

Hover over this area to see cursor preview

Currently Active Property:

cursor: auto;

Syntax:

cursor: value;

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.

HTML

<!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

Tags:

#CSS-Properties #CSS #Web Technologies

CSS content Property

CSS counter-increment Property

CSS Cursor Property

Try It:

Hover over this area to see cursor preview

CSS Cursor Property Values:

Contact Us