cursor

Sriparno08's avatar
Published Mar 30, 2022Updated May 30, 2025
Contribute to Docs

In CSS, the cursor property sets the appearance of the mouse cursor when hovering over an element. The appearance can be set by specifying the type of cursor, or by loading a specific icon. When using an icon, fallback images can be used, ending with a mandatory keyword fallback.

Syntax

The cursor property can be set a specific keyword value:

cursor: keyword;

It can also accept one or more URLs:

cursor: url(cursor_image), url(fallback_cursor_image), keyword;

If the primary cursor_image fails to load, an optional fallback_cursor_image can be applied instead. However, in case all the image URLs fail to load, the mandatory keyword will be used as the last resort.

Common Keywords

These are some common keywords used to specify the type of cursor to display:

Keyword Example Cursor Description
auto Determines the cursor to display based on context.
none No cursor is displayed.
default Default Cursor The default system cursor, usually an arrow.
context-menu Context Menu Cursor Indicates a context menu is available.
help Help Cursor Indicates help information is available.
pointer Pointer Cursor Indicates a link.
progress Progress Cursor System is busy in the background but interaction is allowed.
wait Wait Cursor System is busy and interaction is not allowed.
cell Cell Cursor Indicates a table cell or cells can be selected.
crosshair Crosshair Cursor Used to mark selections in an image.
text Text Cursor Used to indicate editable text.
vertical-text Vertical Text Cursor Used to indicate editable vertical text.

Example 1: Pointer Cursor

In this example, a pointer cursor will appear whenever the cursor hovers over the target paragraph.

Here is the HTML code:

<p class="pg">The cursor is pointing at this paragraph!</p>

Here is the CSS code:

.pg {
cursor: pointer;
}

The output will be:

A GIF that shows how the cursor turns into a pointer cursor whenever it hovers over the paragraph

Example 2: Help Cursor

In this example, a help cursor will appear whenever the cursor hovers over the target paragraph.

Here is the HTML code:

<p class="pg">The cursor is pointing at this paragraph!</p>

Here is the CSS code:

.pg {
cursor: help;
}

The output will be:

A GIF that shows how the cursor turns into a help cursor whenever it hovers over the paragraph

Example 3: Not-Allowed Cursor

In this example, a not-allowed cursor will appear whenever the cursor hovers over the target paragraph.

Here is the HTML code:

<p class="pg">The cursor is pointing at this paragraph!</p>

Here is the CSS code:

.pg {
cursor: not-allowed;
}

The output will be:

A GIF that shows how the cursor turns into a not-allowed cursor whenever it hovers over the paragraph

Frequently Asked Questions

1. Can I use animated cursors in CSS?

Yes, but browser support is limited for these types of cursors. You can use .ani files in Internet Explorer. Modern browsers typically support .cur and .png.

2. Does the cursor property affect touch devices?

No. Touch devices don’t use cursors, so this property has no visible effect on mobile interfaces.

3. Can I chain multiple custom cursors?

You can specify multiple url() cursors with fallbacks. The browser uses the first one it can load successfully.

All contributors

Contribute to Docs

Learn CSS on Codecademy