The cursor property sets the mouse cursor shown when the pointer is over an element. Use it to signal what the user can do: click, select text, wait, or that an action is blocked.
You can use a keyword such as pointer, or load a custom image with url() and a mandatory keyword fallback. The property is inherited, so a parent cursor applies to children unless they override it.
Not deprecated. Core keywords are widely supported. Some keywords and custom image formats still have uneven support across browsers and platforms (for example iPadOS mainly changes appearance for text).
cursor: [url(...) <x> <y>? ,]* <keyword> | initial | inherit;Zero or more image URLs (with optional hotspot), then one required keyword. Example: cursor: url("hand.cur"), pointer;.
| Value | Description | Try it |
|---|---|---|
auto | Default. Browser picks a cursor from context | Try it |
default | Platform arrow cursor | Try it |
pointer | Hand icon. Use for links and clickable controls | Try it |
text | I-beam. Signals selectable or editable text | Try it |
not-allowed | Action will not run. Common on disabled controls | Try it |
wait / progress | Busy state. wait blocks interaction; progress still allows it | Try it |
grab / grabbing | Item can be dragged, or is being dragged | Try it |
help / crosshair | Help is available, or a precise crosshair for selection | Try it |
url() + keyword | Custom image, then a required keyword fallback | Try it |
initial / inherit | initial resets to auto. inherit takes the parent value | Try it |
Other keywords exist for resizing and zooming (ew-resize, zoom-in, and similar). Start with the values above for everyday UI.
cursorMatch the cursor to the action the user can perform on that element.
pointer, text, grab, not-allowed, and so on.url(...) values and end with a keyword fallback.| Piece | Required? | Role |
|---|---|---|
| Keyword | Yes | Always required, including as the last fallback after images |
| Hoverable pointer | Yes (to see it) | Touch-only devices may not show a mouse cursor |
Custom url() | Optional | Must end with a keyword. Keep images small (about 32×32) |
| Inherited | By design | Children inherit unless they set their own cursor |
Change cursor, then move the mouse over the box to see the pointer update.
Each snippet focuses on cursor. Hover the output to see the pointer. Use Try It Yourself for a live editor.
Show a hand cursor on a button-like element.
<style>
button {
cursor: pointer;
}
</style>
<button type="button">Save</button>button.pointer. The browser shows the hand icon over that element.<a>.Show that an action cannot be performed.
<style>
.disabled {
cursor: not-allowed;
}
</style>
<button type="button" class="disabled" disabled>Delete</button>not-allowed. The cursor shows that the action will not run.Show that an item can be grabbed and moved.
<style>
.handle {
cursor: grab;
}
.handle:active {
cursor: grabbing;
}
</style>
<div class="handle">Drag handle</div>grab tells the user the item can be dragged.:active switches to grabbing while the button is held.If the cursor looks wrong or never changes, check these first.
cursor: url("hand.cur") alone is invalid. End with a keyword: cursor: url("hand.cur"), pointer;. Prefer small PNG/CUR icons around 32×32.
A pointer on a card can make nested text look clickable. Override children with cursor: auto or text when needed.
Touch-first phones do not show a mouse cursor. Keep affordances clear with layout and focus styles, not cursor alone. pointer-events is a different property.
MDN notes cases such as no-drop matching not-allowed on Windows/macOS in Firefox. Test critical feedback on your target platforms.
Do not use pointer on non-interactive text, or not-allowed without disabling the control. Keyboard users need real HTML state and focus styles.
cursor is a browser CSS property for pointer appearance. Node.js, Deno, and Bun do not apply it.
Keyword cursors work in all modern browsers and Internet Explorer. Some keywords and custom images have partial or platform-specific behavior.
Bottom line: Safe for everyday keywords such as pointer, text, and not-allowed. Verify custom images and less common keywords on target devices. It is not a runtime API.
auto. The property is inherited.pointer, text, not-allowed, grab, wait.url() lists with a keyword fallback.One line: set cursor to match the action — and never use it as the only sign that something is interactive.
Set the inline base direction for text and layout.
8 people found this page helpful