Touch Devices Don't Show a Cursor at All
A phone or tablet has no mouse pointer to style in the first place — there's simply no cursor on screen for any cursor CSS to affect. Any interaction cue you're relying on a custom cursor to convey needs a separate, touch-appropriate signal (a visible state change, an icon, a label) for touchscreen users, since the cursor styling itself has zero effect on that hardware.
The Fallback Keyword Isn't Optional
When using a custom image cursor, a keyword fallback at the end of the value list is mandatory syntax, not a best practice you can skip — cursor: url('my-cursor.png'); alone, with no trailing keyword, is invalid. The fallback ensures a usable cursor still displays if the custom image fails to load for any reason — a broken file path, an unsupported image format, a slow connection.
Recommended Sizing
32×32 or 48×48 pixels are the generally recommended dimensions for a custom cursor image — larger cursor images may not render consistently across every browser, so staying within these common sizes is the safer choice for predictable cross-browser behavior.
Browser and Format Support Varies
Not every browser supports every cursor image format identically — providing multiple fallback URLs in different formats (an SVG, then a PNG, then a CUR file) gives the browser several chances to successfully load something before falling back to the final keyword.
Hiding the Cursor Entirely
The none keyword removes the cursor from view completely — occasionally used for fully immersive experiences like games, where a custom cursor implemented separately with JavaScript replaces it entirely rather than relying on the native cursor at all.
Ready to build a cursor that accounts for these limitations?
Open CSS Cursor Generator