Introducing the New CSS Cursor Styles in CSS3

Craig Buckler

The early days of web development were a thrill as new technologies and techniques were discovered. We experienced a few stagnant years in the middle of last decade but, thanks to HTML5, web development has become exciting again. In particular, CSS3 is evolving rapidly and you’ll find some interesting gems in the specifications.

In this article, we’re going to examine the CSS cursor property which, as you’d expect, allows you to change the cursor style as the mouse moves over an element. It’s become increasingly important for interactive web applications…

CSS2 Cursor Styles

CSS2 offered relatively few options (hover over any element to see how the cursor changes):

cursor: auto
cursor: inherit
cursor: crosshair
cursor: default
cursor: help
cursor: move
cursor: pointer 
cursor: progress
cursor: text
cursor: wait
cursor: e-resize
cursor: ne-resize
cursor: nw-resize
cursor: n-resize
cursor: se-resize
cursor: sw-resize
cursor: s-resize
cursor: w-resize

CSS3 Cursor Styles

We have more styles to choose from in CSS3. These work in IE9 and the latest versions of Firefox, Chrome, Safari and Opera except where indicated:

cursor: none (not IE, Safari, Opera)
cursor: context-menu (not Firefox, Chrome)
cursor: cell (not Safari)
cursor: vertical-text
cursor: alias (not Safari)
cursor: copy (not Safari)
cursor: no-drop
cursor: not-allowed
cursor: ew-resize
cursor: ns-resize
cursor: nesw-resize
cursor: nwse-resize
cursor: col-resize
cursor: row-resize
cursor: all-scroll

Browser-Specific Cursors

Mozilla and some editions of Chrome and Safari offer a number of vendor-prefixed cursor styles which are likely to become part of the CSS3 specification:

cursor: -webkit-grab; cursor: -moz-grab;
cursor: -webkit-grabbing; cursor: -moz-grabbing;
cursor: -webkit-zoom-in; cursor: -moz-zoom-in;
cursor: -webkit-zoom-out; cursor: -moz-zoom-out;

Creating Your Own Cursor

Finally, you can create your own cursor graphic, e.g.

cursor: url(images/cursor.cur);
cursor: url(images/cursor.png) x y, auto;


  1. Internet Explorer requires a Windows cursor file (.cur).
  2. Firefox, Chrome and Safari require an image — I’d recommend a 24-bit alpha-transparent PNG.
  3. Firefox also requires a second non-URL cursor fallback value.
  4. It’s not supported in Opera.
  5. x and y are optional properties in Firefox, Chrome and Safari which define the precise pointer position from the top-left of the graphic. If omitted, 0 0 is assumed.

Nice, but it sounds like too much effort to me! I’ll be sticking with the standard cursor styles…

And if you enjoyed reading this post, you’ll love Learnable; the place to learn fresh skills and techniques from the masters. Members get instant access to all of SitePoint’s ebooks and interactive online courses, like HTML5 & CSS3 For the Real World.

Comments on this article are closed. Have a question about CSS3? Why not ask it on our forums?

CSS Master, 3rd Edition