Open In App

CSS Cursor Property

Last Updated : 17 Sep, 2024
Summarize
Comments
Improve
Suggest changes
Like Article
Like
Share
Report
News Follow

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 PropertyDescription
autoThe default cursor is where the browser automatically sets it.
aliasIndicates that an alias (shortcut) is being created.
all-scrollIndicates that the entire element can be scrolled.
cellIndicates the user is selecting a cell or set of cells.
context-menuSuggests that a context menu is available.
col-resizeIndicates that the column can be resized horizontally.
copyShows that something is to be copied.
crosshairDisplays a crosshair cursor.
defaultThe default system cursor, typically an arrow.
e-resizeIndicates that the edge of a box is to be moved to the right.
ew-resizeSuggests a bidirectional resize left-right.
helpIndicates that help or additional information is available.
moveUsed when something is draggable or can be moved.
n-resizeIndicates that the edge of a box is to be moved upwards.
ne-resizeThe edge of a box is moved up and right.
nesw-resizeBidirectional resize in north-east and south-west directions.
ns-resizeSuggests a bidirectional resize vertically (up-down).
nw-resizeThe edge of a box is moved up and left.
nwse-resizeA bidirectional resize in north-west and south-east directions.
no-dropIndicates that a dragged item cannot be dropped here.
noneNo cursor is displayed.
not-allowedIndicates that the requested action cannot be executed.
pointerRepresents a pointer, typically used for hyperlinks.
progressIndicates that the system is busy but interactive.
row-resizeShows that the row can be resized vertically.
s-resizeIndicates that the edge of a box is to be moved downwards.
se-resizeThe edge of a box is moved down and right.
sw-resizeThe edge of a box is moved down and left.
textThe text cursor indicates text that can be selected.
URLAllows custom cursors from a list of comma-separated URLs.
vertical-textShows vertical text that can be selected.
w-resizeIndicates that the edge of a box is to be moved left.
waitSuggests the system is busy and the user should wait.
zoom-inIndicates that something can be zoomed in.
zoom-outIndicates that something can be zoomed out.
initialResets the cursor to its initial (default) value.
inheritThe 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.



Next Article

Similar Reads

three90RightbarBannerImg