Why doesn't the CSS cursor property work with custom URLs?

Question

CSS

#cursor {
  cursor: url(cursor.gif);
}

HTML:

<div id="cursor">
  <p>Hello world!</p>
</div>

Answer 1

According to MDN :

zero or more URLs (separated by commas) may be specified, followed by one of the keywords defined in the CSS specification, such as autoor pointer.

Therefore, you need to define the cursor value as fallback for url().

For example, using auto:

#cursor {
  width: 100px;
  height: 100px;
  border: 1px solid;
  cursor: url(//placehold.it/20), auto;
}

<div id="cursor"></div>

Run codeHide result