Cursor Property
Last updated: 2026-09-13
cursor Cursor Property
The cursor property controls the cursor shape shown when the mouse pointer hovers over an element, and it is an important visual cue for interactivity. By choosing different cursor types — such as pointer, text, or not-allowed — you can tell users at a glance whether an element is clickable, draggable, or disabled.
| Category | |
|---|---|
| Initial Value | auto |
| Inherited | Yes |
| Applies To | all |
| Animation Type | discrete |
| CSS Version | CSS2 |
| Status | Standard |
📝 Syntax
cursor: [ [ <url> [ <x> <y> ]? ]# , ]* [ auto | default | none | pointer | text | move | not-allowed | grab | grabbing | progress | wait | help | cell | crosshair | zoom-in | zoom-out | <cursor-keyword> ];⚙️ Values
| Value | Type | Description |
|---|---|---|
auto | default | pointer | text | move | wait | help | not-allowed | grab | grabbing | crosshair | Keyword | A predefined cursor type |
none | Keyword | Hides the cursor |
▶ Example
Edit the code below and see the live result in the playground:
🌐 Browser Support
| Browser |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| cursor | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1.2 | ✓ v1 |
| Supported in all major browsers | |||||
Tip： pointer is the most common value and signals that an element is clickable. Setting it explicitly on interactive elements such as buttons and links improves usability.
Tip： A custom image can be used as the cursor, for example cursor: url(cur.cur), auto. Always provide a fallback keyword.
❓ FAQ
QIs using cursor: none to hide the mouse cursor a good idea in CSS?
AIn the vast majority of cases, hiding the cursor is not recommended: users lose their sense of position and operation feedback, and accessibility suffers. It only fits special cases such as full-screen presentations, game canvases, or areas already covered by a custom cursor. If you hide it, provide keyboard alternatives and avoid it on text-heavy pages.
QWhat is the difference between the grab and grabbing cursor values?
Agrab shows an open hand and indicates that an element can be dragged, so it is usually set on the drag source. grabbing shows a closed fist, indicating an active drag, and is switched on by JavaScript while the drag is in progress. Together they provide immediate state feedback for card dragging, sliders, and other pointer-driven interactions.
QHow do I use a custom image as the mouse cursor in CSS stylesheets?
AWrite cursor: url('cursor.png') 20 10, auto; — the url sets the image path, the two numbers are the hotspot coordinates (where clicks register), and the final auto is the fallback cursor used if the image fails to load, which must be kept. Prefer .cur, .png, or .svg files no larger than 32x32 for better cross-platform support.
QWhy should buttons and links use cursor: pointer in their CSS styles?
AButtons and links do not always show a hand cursor by default — buttons render an arrow in some browsers. Setting cursor: pointer explicitly communicates the clickable affordance and improves usability and click-through rates. But do not overuse it: adding pointer to plain text or non-interactive elements makes users think they are clickable.
🏷️ Related Properties
💡 Related Cases
📚 Related Tutorials
