Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

CSS cursor Property

  • Last Updated : 11 Oct, 2021

The cursor property is used to specify the mouse cursor to be displayed while pointing on 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;

Property Values:

  • auto: This is the default property where the browser sets a cursor.
  • alias: This property is used to display the cursor’s indication of something is to be created.
  • all-scroll: In this property, the cursor indicates scrolling.
  • cell: In this property, the cursor indicates a cell or set of cells are selected.
  • context-menu: In this property, the cursor indicates that a context menu is available.
  • col-resize: In this property, the cursor indicates that the column can be resized horizontally.
  • copy: In this property, the cursor indicates something is to be copied.
  • crosshair: In this property, the cursor renders as a crosshair.
  • default: The default cursor.
  • e-resize: In this property, the cursor indicates an edge of a box is to be moved to the right.
  • ew-resize: In this property, the cursor indicates a bidirectional resize cursor.
  • help: In this property, the cursor indicates that help is available.
  • move: In this property, the cursor indicates something is to be moved
  • n-resize: In this property, the cursor indicates an edge of a box is to be moved up.
  • ne-resize: In this property, the cursor indicates an edge of a box is to be moved up and right.
  • nesw-resize: This property indicates a bidirectional resize cursor.
  • ns-resize: This property indicates a bidirectional resize cursor.
  • nw-resize: In this property, the cursor indicates an edge of a box is to be moved up and left.
  • nwse-resize: This property indicates a bidirectional resize cursor.
  • no-drop: In this property, the cursor indicates that the dragged item cannot be dropped here.
  • none: This property indicates no cursor is rendered for the element.
  • not-allowed: In this property, the cursor indicates that the requested action will not be executed.
  • pointer: In this property, the cursor is a pointer and indicates link
  • progress: In this property, the cursor indicates that the program is busy.
  • row-resize: In this property, the cursor indicates that the row can be resized vertically.
  • s-resize: In this property, the cursor indicates an edge of a box is to be moved down.
  • se-resize: In this property, the cursor indicates an edge of a box is to be moved down and right.
  • sw-resize: In this property, the cursor indicates an edge of a box is to be moved down and left.
  • text: In this property, the cursor indicates text that may be selected.
  • URL: In this property a comma-separated list of URLs to custom cursors and a generic cursor at the end of the list.
  • vertical-text: In this property, the cursor indicates vertical-text that may be selected.
  • w-resize: In this property, the cursor indicates an edge of a box is to be moved left.
  • wait: In this property, the cursor indicates that the program is busy.
  • zoom-in: In this property, the cursor indicates that something can be zoomed in.
  • zoom-out: In this property, the cursor indicates that something can be zoomed out.
  • initial: This property is used to set 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>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


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!