The cursor property in CSS controls what the mouse cursor will look like when it is located over the element in which this property is set. Obviously, it only is relevant in browsers/operating systems in which there is a mouse and cursor. They are used essentially for UX - as they convey the idea of certain functionality. So try not to break that affordance =).

There are a bunch of them:

Check out this Pen!
.auto            { cursor: auto; }
.default         { cursor: default; }
.none            { cursor: none; }
.context-menu    { cursor: context-menu; }
.help            { cursor: help; }
.pointer         { cursor: pointer; }
.progress        { cursor: progress; }
.wait            { cursor: wait; }
.cell            { cursor: cell; }
.crosshair       { cursor: crosshair; }
.text            { cursor: text; }
.vertical-text   { cursor: vertical-text; }
.alias           { cursor: alias; }
.copy            { cursor: copy; }
.move            { cursor: move; }
.no-drop         { cursor: no-drop; }
.not-allowed     { cursor: not-allowed; }
.all-scroll      { cursor: all-scroll; }
.col-resize      { cursor: col-resize; }
.row-resize      { cursor: row-resize; }
.n-resize        { cursor: n-resize; }
.e-resize        { cursor: e-resize; }
.s-resize        { cursor: s-resize; }
.w-resize        { cursor: w-resize; }
.ns-resize       { cursor: ns-resize; }
.ew-resize       { cursor: ew-resize; }
.ne-resize       { cursor: ne-resize; }
.nw-resize       { cursor: nw-resize; }
.se-resize       { cursor: se-resize; }
.sw-resize       { cursor: sw-resize; }
.nesw-resize     { cursor: nesw-resize; }
.nwse-resize     { cursor: nwse-resize; }

You can also have the cursor be an image:

.custom {
   cursor: url(images/my-cursor.png), auto;

Some WebKit only cursors:


More Information

Browser Support

Note: cursor: none; not supported until Firefox 3, Safari 5, and Chrome 5. Not at all supported in IE or Opera. Image URL cursors not supported in Opera. The following not supported in IE or Opera: not-allowed, no-drop, vertical-text, all-scroll, col-resize, row-resize

Chrome Safari Firefox Opera IE Android iOS
Any 1.2+ Any 7+ Any N/A N/A


  1. richard
    Permalink to comment#

    col-resize not work in chrome, it just disappearred when i was hovering the place which had style like’cursor:col-resize’

  2. Brian Hogg
    Permalink to comment#

    Just noticed a small typo:

    .deafult { cursor: default; }

    (.deafult instead of .default)


    • grilly
      Permalink to comment#

      This error is also (and still) in the codepen demo at the beginning of the article!

      Please fix it – as the cursor will change then!

      I’m using cursor:default;a lot, when i don’t want the text-cursor or the pointer-cursor to appear.

  3. Trav
    Permalink to comment#

    Minor nit here: according to the Moz docs linked above, ‘not-allowed’ is supported for IE6 and above. I only know because I came here in search of a bug fix for this cursor type not appearing in IE when dynamically added via jQuery.

    • Jonathan
      Permalink to comment#

      Thanks so much Trav. I was going mad that the cursor wasn’t changing. Turns out I had the same issue as you with jQuery.

  4. Charith Janitha
    Permalink to comment#

    Thank you for this cool way of presenting cursors, now I have a place to come look for the correct cursor if I forget. Always wanted this.


  5. Adam
    Permalink to comment#

    Small note about the webkit only cursors


    Don’t exist, the “zoom” part needs to be taken out for these and should be:


    I find these to be handy when building webkit only web applications :)

    • Ian Davis
      Permalink to comment#

      Adam, how do you change the cursors for the dom elements? I understand the -webkit-grab, but not the -grabbing one. Maybe I have to handle the “ondrag” event if I’m using jQuery UI draggable? Or change the classes in the “start” and “end” events? Thanks!

    • Lane
      Permalink to comment#

      no he means there is no cursor:-webkit-zoom-grab as it says above. it should be -webkit-grab

  6. Mickey
    Permalink to comment#

    Anyone know of a way to make the cursor be actual text? I’ve achieved this using jQuery and a div that tracks the position of the cursor – the only issue is that then the cursor can’t click/hover anything, since the div is blocking everything below it. Any ideas?


  7. Sten Hougaard
    Permalink to comment#

    I have made a codepen where I use data:uri to add inline custom cursors:

  8. Kris Baker
    Permalink to comment#

    Thanks! What a handy little reference, saved me some frustration!

  9. Abhilash Bhattacharjee
    Permalink to comment#

    One of the best cursor tuts I have ever seen :-Cheers to Chris

  10. Onisor Cristian
    Permalink to comment#

    Could you give me an example for IE using zoom-in, and zoom-out, since they do work and i haven’t seen any examples here using these:

    cursor: zoom-in; 
  11. Dharmand
    Permalink to comment#

    demo ?

  12. Ann
    Permalink to comment#

    If I use CSS for changing the cursor image if it goes over a div, it works with a smiley but not with a self-made image with the same image-properties as the smiley (also a gif with reduced colors)… I don’t see the difference… why does the smiley from the web works but not my image?

  13. Sten Hougaard
    Permalink to comment#

    @Ann I have made a codepen where I have played around with custom cursors. Please note that it is not supportet in general. Custom cursors using data-uri

  14. megadroid
    Permalink to comment#

    Does anyone know what’s the difference between wait and progress? On Safari they look the same. Is it pure semantics?

    • wer
      Permalink to comment#

      On Windows:
      “progress” = cursor + rotating circle = (you can use the page, but it is busy)
      “wait” = rotating circle only = (you cannot use the page)

  15. Keet
    Permalink to comment#

    I created a custom cursor image with the code provided but on front end the cursor has a very thin black outline…is there any way I can remove it?

    • Yannick
      Permalink to comment#

      I also tried to add my custom image cursor with the line of css shown above. Nothing shows up. Are there -webkit-moz-o requirements?

  16. Bablu
    Permalink to comment#


  17. Scott Smith
    Permalink to comment#

    Hey guys,

    Has anyone experienced an enlarged custom cursor? Like it zooms in ridiculously?

    Any help would be great!

  18. Max
    Permalink to comment#


  19. hasan
    Permalink to comment#

    Thank you :)

  20. Shahid
    Permalink to comment#

    i wanted to use the cursor an image.. i write down the url but it didt work. than i saw ur article and i got ma prob solved.. thnx man

  21. Garrett
    Permalink to comment#

    Cursor: not-allowed works on IE5 on Mac.

  22. Cara Pintarku

    Default cursor works at mozilla 30. Thanks ! Its wonderful …

  23. Andreas

    It should be noted that it doesn’t work on pseudo elements .

  24. Video bokep indo

    Yes, This very useful tut.

  25. Michelle
    Permalink to comment#

    Does anyone know the difference between auto and default? Thank you.

    • Harry
      Permalink to comment#

      The default forces the cursor to the arrow that you see in most ordinary use.
      Auto is what occurs with normal use. It allows the OS (or whoever) to control the cursor’s appearance and will change based on context as it normally does.

      They’ve just missed / forgotten to add the css to the default demo above, so it’s behaving as auto.

  26. Robert Ignat
    Permalink to comment#

    Small issue: the default div doesn’t have the “cursor: default” style applied so when you hover the text, the cursor changes to text cursor type. When cursor: default is applied on an element, it should always be the default arrow cursor.

  27. Cameron
    Permalink to comment#

    Here’s a jsfiddle if you want to see each in demo:

  28. redcreatives
    Permalink to comment#

    very useful tutorial.. thanks..

  29. Shashank
    Permalink to comment#

    Any way to lazy load the cursor image?

  30. Shashank
    Permalink to comment#

    Any way we can lazy load the cursor image?

  31. Hardeep Singh
    Permalink to comment#

    Well, you missed one cursor name “grab”.

    $("tbody tr").css("cursor", "grab");

  32. Mdabuko
    Permalink to comment#

    h1 {
    cursor: url(“Cursor and Fontface\arrow-up-left-24.png”), wait;

  33. Mdabuko
    Permalink to comment#

    My custom cursor still doesn’t work, I still don’t get the arrow.png rendered.

    h1 {
    cursor: url(“Cursor and Fontface\arrow-up-left-24.png”);

    • Eric P
      Permalink to comment#

      Try without the quotes, and correct path to the image:

      cursor: url(images/my-cursor.png), auto;

  34. vinay
    Permalink to comment#

    don’t work cursor:grab in chrome.

  35. Matthew Woodard
    Permalink to comment#

    Thanks for the info! Does this still apply to OSX Yosemite? I can’t seem to get the cursor: pointer; (hand) to work any more.

    Thanks is advance.

  36. Hus
    Permalink to comment#

    well rounded information the cursor seems working.

  37. Bal Nuro
    Permalink to comment#

    Cool stuffs the coding look fine.

  38. chintan
    Permalink to comment#

    Hi , I implemented custom cursor like:
    $(“div1”).css({cursor : ‘url(../image/image1/cursors/curso.cur), auto’});
    This is working fine when I am accessing my page with http as soon as I access my page with https it is not working . It shows default cursor only. I am redirecting my page from http to https. I hav IE10 and windows. I tried to give absolute url also but no luck. Can anyone please help me .

  39. jai
    Permalink to comment#

    I too want to add custom mouse pointer for my site

    please help


  40. Alex
    Permalink to comment#

    Would be cool/interesting if the cursor could be set by css. For example, by setting content “Read more” + what font, background & color etc.


  41. Sohrab
    Permalink to comment#

    Thanks, it helped.

  42. jesus paul madrid serrano
  43. Mizan
    Permalink to comment#

    Really this is so effective to know more about cursor in CSS.

  44. yahya
    Permalink to comment#

    can you help me i went the hand pointer..

  45. Dee
    Permalink to comment#

    Hi. I’m a Class 9 student and I’ve been trying to customize my cursor with an image in html, but it refuses to work. Can someone help please?

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences like this:

  function example() {
    element.innerHTML = "<div>code</div>";

We have a pretty good* newsletter.