How to Change the Mouse Cursor with CSS

/ Updated on April 1, 2023 / CSS /
  • 5 out of 5 Stars

CSS is an incredibly versatile technology, that allows you to control the appearance and behavior of web pages with ease. One aspect of this is the ability to specify different mouse cursors for HTML elements, which can help to improve the user experience and provide additional information about the functionality of these elements on a page.

CSS cursor

In this article, we'll take a look at how to change the mouse cursor with CSS, including the different types of cursors available and how to use them in your designs.

What Are Mouse Cursors?

Mouse cursors are the visual representation of the mouse pointer on a computer screen. They can take many different forms, from the standard arrow pointer to more specialized shapes and icons that indicate different types of functionality. For example, the hand icon that appears when hovering over a clickable link or button.

Different mouse cursors can help to provide additional information to users about the functionality of some elements on a page. For instance, if you want to indicate that clicking on the element will show the context help, you can define the "help" cursor for this element using the cursor CSS property.

The cursor Property Syntax

Mouse cursors in CSS are specified using the cursor property. This property allows web developers to define the type of cursor that should be displayed when the mouse hovers over an element. The cursor property can be set to a variety of values, including keywords such as "help", "move", and "text", as well as custom URLs that point to images or icons. The syntax is as follows:

cursor: [<url [<x> <y>]?,]* [ auto | default | none |
context-menu | help | pointer | progress | wait |
cell | crosshair | text | vertical-text | alias | 
copy | move | no-drop | not-allowed | grab | grabbing |
e-resize | n-resize | ne-resize | nw-resize | s-resize |
se-resize | sw-resize | w-resize | ew-resize | ns-resize |
nesw-resize | nwse-resize | col-resize | row-resize | all-scroll |
zoom-in | zoom-out ]

Usage example:

Using the help cursor for the abbr tags:

abbr { 
text-decoration: none;
border-bottom: 2px dotted #757575;
cursor: help;

I like editing a <abbr title="Cascading Style Sheets">CSS</abbr> file without necessarily having to edit an <abbr title="Hypertext Markup Language">HTML</abbr> file.
I like editing a CSS file without necessarily having to edit an HTML file.

CSS2 Cursor Styles

There are a number of different types of mouse cursors available in CSS, each with its own unique purpose and appearance. Most of them are listed below. You can preview each cursor and test if your browser supports it by moving the mouse pointer above the example blocks.

Styles, available in the CSS 2.2 Specification:

Initial value. The browser determines the cursor to display based on the current context. (I.e. above the text, it will be the "text" cursor, above the hyperlink, it will be the "pointer", and so on.)

cursor: auto

A simple crosshair (e.g., short line segments resembling a "+" sign).

cursor: crosshair

The platform-dependent default cursor. Often rendered as an arrow.

cursor: default

The cursor is a pointer that indicates a link.

cursor: pointer

Indicates something is to be moved.

cursor: move

e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize
Indicate that some edge is to be moved. For example, the 'se-resize' cursor is used when the movement starts from the south-east corner of the box.

cursor:nw-resize cursor:n-resize cursor:ne-resize
cursor:w-resize   cursor:e-resize
cursor:sw-resize cursor:s-resize cursor:se-resize
Indicates text that may be selected. Often rendered as an I-bar.

cursor: text

Help is available for the object under the cursor. Often rendered as a question mark or a balloon.

cursor: help

The user agent retrieves the cursor from the resource designated by the URI. If the user agent cannot handle the first cursor of a list of cursors, it should attempt to handle the second, etc. If the user agent cannot handle any user-defined cursor, it must use the generic cursor that is specified at the end of the list.

cursor: url(''),text

Cursor formats, supported by browsers:

  • Chrome, Safari: .cur, .png, .gif, .jpg.
  • Firefox, Gecko: .cur, .png, .gif, .jpg, .svg.
  • Internet Explorer, Edge: .cur, .ani.
You can use to draw the .cur files.
You can also use the data URI to embed the cursor image directly into the page source, as illustrated in this CodePen.

CSS3 Cursor Styles

In 2004, more cursor styles were added to the CSS3 UI candidate recommendation, which became the standard in 2018.

No cursor is rendered for the element.

cursor: none

A context menu is available for the object under the cursor. Often rendered as an arrow with a small menu-like graphic next to it.

cursor: context-menu

A progress indicator. The program is performing some processing but is different from "wait" in that the user may still interact with the program.

cursor: progress

Indicates that a cell or set of cells may be selected.

cursor: cell

Indicates vertical text that may be selected.

cursor: vertical-text

Indicates an alias of/shortcut to something is to be created.

cursor: alias

Indicates something is to be copied.

cursor: copy

Indicates that the dragged item cannot be dropped at the current cursor location.

cursor: no-drop

Indicates that the requested action will not be carried out.

cursor: not-allowed

Indicates that something can be grabbed (dragged to be moved).

cursor: grab

Indicates that something is being grabbed (dragged to be moved).

cursor: grabbing

Indicates that the item/column can be resized horizontally.

cursor: col-resize

Indicates that the item/row can be resized vertically.

cursor: row-resize

Indicates that something can be scrolled in any direction.

cursor: all-scroll

Indicates that something can be zoomed (magnified) in.

cursor: zoom-in

Indicates that something can be zoomed (magnified) out.

cursor: zoom-out

Browser Compatibility

The CSS2 cursor styles are supported by all modern browsers.
The CSS3 styles, except zoom-in and zoom-out, are supported by 100% of desktop and 70% of mobile browsers.
The CSS3 zoom-in and zoom-out cursor styles are supported by 98% of desktop and 70% of mobile browsers.


Changing the mouse cursor with CSS is a simple but powerful way to improve the user experience on your website. By providing visual cues about the functionality of different elements, you can make it easier for visitors to interact with your site and increase engagement.

I hope this article has provided you with a solid understanding of how to specify the mouse cursor with the cursor CSS property and thus enhance your web pages. Thanks for reading, and happy coding!

Rate This Article

How would you rate the quality of this content?
Currently rated: 5 out of 5 stars. 2 users have rated this article. Select your rating:
  • 5 out of 5 Stars
  • 1
  • 2
  • 3
  • 4
  • 5

About The Author

Lembit Kuzin is a software developer from Estonia. He is passionate about new technologies, web development and search engine optimization. He has over 10 years of webdev experience and now writes exclusive articles for Webmaster Tips.