The CSS **`cursor` property** allows you to set the type of cursor to show for an element when the mouse pointer hovers over it. You can even use an image, using a URL, as your customized cursor.

# Syntax
Here is how you can define a custom cursor for an element `ele`:


ele {
    cursor: [<url> <x> <y>?,]*, [keyword_value,]; 
}


- **`cursor`:** Cursor property keyword used to set the property for the element.

- **`[<url> <x> <y>?,]*`:** An optional list of URLs. Elements in the list are used as fallback values if the element preceding it does not work. `<x>` and `<y>` are optional arguments after each URL which represent the vertical and horizontal offset of the used image from the cursor hotspot.

- **`keyword_value`:** A mandatory list of one or more default inbuilt cursor values. The property falls back on these values if there are no URLs provided or all of them don't work

<br>

# Keyword values
The following illustration shows all the default in-built values for the cursor property, compatible across all major browsers.

table, th, td {
  border: 1px dotted black;
  border-collapse: collapse;
}
th, td {
  padding: 15px;
  text-align: left;
}
table#t1 {
  width: 100%;    
  background-color: #f1f1c1;
}


#b0{
    border-left: 6px solid #45597E;
    background-color: #DBE2F4; 
    border-radius: 5px;
    text-align:center;
    color: #45597E;
    cursor: url("https://www.educative.io/api/edpresso/shot/5765357161676800/image/6156993351909376")
    , auto;
}
#b1{
    cursor: auto;
}
#b2{
    cursor: default;
}
#b3{
    cursor: none;
}
#b4{
    cursor: pointer;
}
#b5{
    cursor: progress;
}
#b6{
    cursor: help;
}
#b7{
    cursor: text;
}
#b8{
    cursor: cell;
}
#b9{
    cursor: crosshair;
}
#b10{
    cursor: alias;
}
#b11{
    cursor: context-menu;
}
#b12{
    cursor: vertical-text;
}
#b13{
    cursor: copy;
}
#b14{
    cursor: move;
}
#b15{
    cursor: no-drop;
}
#b16{
    cursor: not-allowed;
}
#b17{
    cursor: all-scroll;
}
#b18{
    cursor: col-resize;
}
#b19{
    cursor: row-resize;
}
#b20{
    cursor: nwse-resize;
}
#b21{
    cursor: nesw-resize;
}
#b22{
    cursor: n-resize;
}
#b23{
    cursor: e-resize;
}
#b24{
    cursor: s-resize;
}
#b25{
    cursor: w-resize;
}
#b26{
    cursor: ns-resize;
}
#b27{
    cursor: ew-resize;
}
#b28{
    cursor: ne-resize;
}
#b29{
    cursor: nw-resize;
}
#b30{
    cursor: sw-resize;
}
#b31{
    cursor: se-resize;
}
#b32{
    cursor: wait;
}
#b33{
    cursor: grab;
}
#b34{
    cursor: grabbing;
}
#b35{
    cursor: zoom-in;
}
#b36{
    cursor: zoom-out;
}

<html>
<head>

</head>
<body>
<h1 id="b0"> Educative! </h1>
<p style="text-align:center;"> Hover over each block to see what the cursor looks like! </p>
<table id="t1">
  <tr>
    <td id="b1">auto</td>
    <td id="b2">default</td>
    <td id="b3">none</td>
    <td id="b4">pointer</td>
    <td id="b5">progress</td>
    <td id="b6">help</td>
  </tr>
  <tr>
    <td id="b7">text</td>
    <td id="b8">cell</td>
    <td id="b9">cross-hair</td>
    <td id="b10">alias</td>
    <td id="b11">context-menu</td>
    <td id="b12">vertical-text</td>
  </tr>
  <tr>
    <td id="b13">copy</td>
    <td id="b14">move</td>
    <td id="b15">no-drop</td>
    <td id="b16">not-allowed</td>
    <td id="b17">all-scroll</td>
    <td id="b18">col-resize</td>
  </tr>
  <tr>
    <td id="b19">row-resize</td>
    <td id="b20">nwse-resize</td>
    <td id="b21">nesw-resize</td>
    <td id="b22">n-resize</td>
    <td id="b23">e-resize</td>
    <td id="b24">s-resize</td>
  </tr>
  <tr>
    <td id="b25">w-resize</td>
    <td id="b26">ns-resize</td>
    <td id="b27">ew-resize</td>
    <td id="b28">ne-resize</td>
    <td id="b29">nw-resize</td>
    <td id="b30">sw-resize</td>
  </tr>
  <tr>
    <td id="b31">se-resize</td>
    <td id="b32">wait</td>
    <td id="b33">grab</td>
    <td id="b34">grabbing</td>
    <td id="b35">zoom-in</td>
    <td id="b36">zoom-out</td>
  </tr>
</table>

</body>
</html>

codemirror

# Cursor image using URL
You may also use a custom image for the cursor, passing it as a URL, as shown below:

#b0{
    cursor: url("https://www.educative.io/api/edpresso/shot/5765357161676800/image/6156993351909376")
    , auto;
    padding: 20px;
    border-left: 6px solid #45597E;
    background-color: #DBE2F4; 
    border-radius: 5px;
    text-align:center;
    color: #45597E;
}

table, th, td {
  border: 1px dotted black;
  border-collapse: collapse;
}
th, td {
  padding: 15px;
  text-align: left;
}
table#t1 {
  width: 100%;    
  background-color: #f1f1c1;
}

<html>
    <head>

    </head>
    <body>
        <h1 id="b0"> Educative! </h1>
    </body>
</html>

How to use the cursor property in CSS

Syntax

Keyword values

Cursor image using URL