Cursor stylesLimited availability
The cursor CSS property styles the pointer, allowing you to provide hints to the user on how to interact with the hovered element.
Not yet supported in all major browsers — check the table and provide a fallback.
Browser support
DesktopChrome
1–67Not supported
68+Supportedsince Jul 24, 2018
Current: 155Edge
12–18Not supported
79+Supportedsince Jan 15, 2020
Current: 154Firefox
1–26Not supported
27+Supportedsince Feb 4, 2014
Current: 157Safari
1–10.1Not supported
11+Supportedsince Sep 19, 2017
Current: 27MobileChrome Android
18–67Not supported
68+Supportedsince Jul 24, 2018
Current: 155Firefox Android
4–94Not supported
95+Supportedsince Dec 7, 2021
Current: 157Safari iOS
✕Not supportedup to 27
Current: 27How to use
Not supported in Safari iOS. Use feature detection below and provide a fallback (or a polyfill) for those browsers.
Example
Full syntax and examples are on MDN: cursor.
Feature detection
CSS · check before using
@supports (cursor: initial) {
/* styles that rely on cursor */
}
/* or in JavaScript */
if (CSS.supports("cursor", "initial")) {
// use it
}Specification
Sub-features
Support for each part of the feature (40). The overall table above shows when the whole feature works.
| Sub-feature | Chrome | Edge | Firefox | Safari | Chrome Android | Firefox Android | Safari iOS |
|---|---|---|---|---|---|---|---|
| cursor | 1 | 12 | 1 | 1.2 | 18 | 95 | 13.4 |
| cursor.alias | 1 | 12 | 1.5 | 3 | 18 | 95 | ✕ |
| cursor.all-scroll | 1 | 12 | 1.5 | 3 | 18 | 95 | ✕ |
| cursor.auto | 1 | 12 | 1 | 1.2 | 18 | 95 | 13.4 |
| cursor.cell | 1 | 12 | 1.5 | 3 | 18 | 95 | 13.4 |
| cursor.col-resize | 1 | 12 | 1.5 | 3 | 18 | 95 | ✕ |
| cursor.context-menu | 1 | 12 | 1.5 | 3 | 18 | 95 | ✕ |
| cursor.copy | 1 | 12 | 1.5 | 3 | 18 | 95 | ✕ |
| cursor.crosshair | 1 | 12 | 1 | 1.2 | 18 | 95 | ✕ |
| cursor.default | 1 | 12 | 1 | 1.2 | 18 | 95 | ✕ |
| cursor.e-resize | 1 | 12 | 1 | 1.2 | 18 | 95 | ✕ |
| cursor.ew-resize | 1 | 12 | 1.5 | 3 | 18 | 95 | ✕ |
| cursor.grab | 68 | 14 | 27 | 11 | 68 | 95 | ✕ |
| cursor.grabbing | 68 | 79 | 27 | 11 | 68 | 95 | ✕ |
| cursor.help | 1 | 12 | 1 | 1.2 | 18 | 95 | ✕ |
| cursor.move | 1 | 12 | 1 | 1.2 | 18 | 95 | ✕ |
| cursor.n-resize | 1 | 12 | 1 | 1.2 | 18 | 95 | ✕ |
| cursor.ne-resize | 1 | 12 | 1 | 1.2 | 18 | 95 | ✕ |
| cursor.nesw-resize | 1 | 12 | 1.5 | 3 | 18 | 95 | ✕ |
| cursor.no-drop | 1 | 12 | 1.5 | 3 | 18 | 95 | ✕ |
Show 20 more
| Sub-feature | Chrome | Edge | Firefox | Safari | Chrome Android | Firefox Android | Safari iOS |
|---|---|---|---|---|---|---|---|
| cursor.none | 5 | 12 | 3 | 5 | 18 | 95 | ✕ |
| cursor.not-allowed | 1 | 12 | 1.5 | 3 | 18 | 95 | ✕ |
| cursor.ns-resize | 1 | 12 | 1.5 | 3 | 18 | 95 | ✕ |
| cursor.nw-resize | 1 | 12 | 1 | 1.2 | 18 | 95 | ✕ |
| cursor.nwse-resize | 1 | 12 | 1.5 | 3 | 18 | 95 | ✕ |
| cursor.pointer | 1 | 12 | 1 | 1.2 | 18 | 95 | ✕ |
| cursor.progress | 1 | 12 | 1 | 1.2 | 18 | 95 | ✕ |
| cursor.row-resize | 1 | 12 | 1.5 | 3 | 18 | 95 | ✕ |
| cursor.s-resize | 1 | 12 | 1 | 1.2 | 18 | 95 | ✕ |
| cursor.se-resize | 1 | 12 | 1 | 1.2 | 18 | 95 | ✕ |
| cursor.sw-resize | 1 | 12 | 1 | 1.2 | 18 | 95 | ✕ |
| cursor.text | 1 | 12 | 1 | 1.2 | 18 | 95 | 13.4 |
| cursor.url | 1 | 12 | 1.5 | 3 | 18 | 95 | 13.4 |
| cursor.url_positioning_syntax | 1 | 79 | 1.5 | 3 | 18 | 95 | ✕ |
| cursor.vertical-text | 1 | 12 | 1.5 | 3 | 18 | 95 | ✕ |
| cursor.w-resize | 1 | 12 | 1 | 1.2 | 18 | 95 | ✕ |
| cursor.wait | 1 | 12 | 1 | 1.2 | 18 | 95 | ✕ |
| cursor.zoom-in | 37 | 12 | 24 | 9 | 37 | 95 | ✕ |
| cursor.zoom-out | 37 | 12 | 24 | 9 | 37 | 95 | ✕ |
| svg.global_attributes.cursor | 1 | 12 | 1 | 1.2 | 18 | 95 | 1 |