Skip to main content

Introducing the New CSS Cursor Styles in CSS3

By Craig Buckler
Microsoft Tech

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?

Craig is a freelance UK web consultant who built his first page for IE2.0 in 1995. Since that time he's been advocating standards, accessibility, and best-practice HTML5 techniques. He's created enterprise specifications, websites and online applications for companies and organisations including the UK Parliament, the European Parliament, the Department of Energy & Climate Change, Microsoft, and more. He's written more than 1,000 articles for SitePoint and you can find him @craigbuckler.

Integromat Tower Ad