Custom CSS Cursors: The Rules Browsers Actually Enforce

CSS makes custom cursors look like one line of code. Browsers add several rules that make them fail silently.

The syntax:

.my-area { cursor: url("pointer.cur"), auto; }

The final keyword is required as the fallback.

The rules

• 128 px maximum. Chrome and Firefox refuse larger cursor images.
• 32 px is the practical size. Chrome hides cursors bigger than 32 px when they touch its own interface, and MDN recommends 32 x 32.
• Multi-size .cur files backfire. Chrome and Firefox use the largest image, so a Windows-style file with 128 px inside shows a huge pointer.

Setting the click point

Two ways. Store it in a .cur file and give no numbers in the CSS, or use a PNG and give it in CSS, measured from the top-left:

cursor: url("pointer.png") 4 2, auto;

If it doesn't show

Check the file path, the image size, and the fallback keyword first.

To make a 32 px cursor with the click point stored inside, use the website preset in our free tool at flipconverto.com/convert/png-to-cur, which also has a live test box. It's our own tool.

Sources: MDN, "cursor" (https://developer.mozilla.org/en-US/docs/Web/CSS/cursor); W3C, CSS Basic User Interface Level 4.

Note: this article was drafted with AI assistance and checked against our own test results.