How to Specify Mouse Cursors with CSS

By / Updated: Nov 26, 2019 /
  • 5 out of 5 Stars
Published in: CSS

CSS allows you to define a cursor that will be displayed at the specific element on your page. For instance, if you want to show that the clicking on the element will show the context help, you can define the "help" cursor for this element using the cursor CSS property.

CSS Code

Cursor Property Syntax

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 ]

Below is the list of cursor styles you can use. You can preview each cursor and test if your browser supports it by moving mouse pointer above the example blocks.

CSS2 Cursor Styles

Styles, available in the CSS 2.2 Specification:

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 at the end of the list.

cursor: url(''),text

Initial value. The browser determines the cursor to display based on the current context. (I.e. above the text it will be "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

CSS3 Cursor Styles

In 2004, more cursor styles were added to the CSS3 UI candidate recommendation, which became standard since 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

Build Your Website with Namecheap - Get Privacy Protection Free Forever
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 the 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

CSS2 cursor styles are supported by all modern browsers.

CSS3 styles, except zoom-in and zoom-out, are supported by 100% of desktop and 65% of mobile browsers.

CSS3 zoom-in and zoom-out cursor styles are supported by 95% of desktop and 65% of mobile browsers.

Cursor formats, supported by browsers, if cursor is specified via url:

  • Internet Explorer, Edge: cur, ani.
  • Firefox, Gecko: cur, png, gif, jpg, svg.
  • Chrome, Safari: cur, png, gif, jpg.

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