Why is the CSS cursor property not working with a custom URL?

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 may be specified (comma-separated), which must be followed by one of the keywords defined in the CSS specification, such as auto or pointer.

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

For instance, using auto:

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

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