The CSS cursor property
The CSS cursor property sets which mouse cursor appears over an element. The most common is cursor: pointer, the hand that signals something is clickable. Other useful values include text, not-allowed, wait and grab. Note that changing the cursor is cosmetic — it does not make an element actually interactive.
Overview
cursor decides what the mouse pointer looks like while it hovers over an element. It is a small touch, but it is a big part of how an interface communicates what you can do — the hand cursor over a button, the I-beam over editable text, the "no entry" symbol over something disabled.
By far the most-used value is pointer, the pointing hand. Real <a> links already show it; you mostly add it to custom clickable things built from other elements. Beyond that, text marks selectable text, not-allowed flags a blocked action, wait and progress show the system is busy, and grab / grabbing hint at draggable interfaces.
One honest caveat: setting cursor: pointer on a <div> makes it look clickable but does nothing for keyboard users or assistive technology. The cursor is feedback, not function — if something should be a button, build it as a <button>.
Syntax
selector {
cursor: value;
}
/* show the hand on a custom control */
.clickable {
cursor: pointer;
}Values
The cursor property accepts the values below. Every property also accepts the CSS-wide keywords inherit, initial, revert and unset.
| Value | Description |
|---|---|
pointer |
The hand cursor that signals something is clickable. |
default |
The standard arrow. |
text |
The I-beam shown over selectable or editable text. |
not-allowed |
A blocked symbol for disabled or unavailable actions. |
grab, grabbing |
Open and closed hands for draggable interfaces. |
wait, progress |
A busy indicator while something is loading. |
Example
<style>
.row { display: flex; flex-wrap: wrap; gap: 10px; font: 600 13px system-ui, sans-serif; }
.row div { background: #eef2ff; color: #3730a3; padding: 14px 16px; border-radius: 8px; }
.p { cursor: pointer; }
.t { cursor: text; }
.n { cursor: not-allowed; }
.g { cursor: grab; }
</style>
<div class="row">
<div class="p">pointer</div>
<div class="t">text</div>
<div class="n">not-allowed</div>
<div class="g">grab</div>
</div>Best practices
- Add
cursor: pointerto custom clickable elements, but build genuinely interactive things as a <button> or<a>so they work for everyone. - Use
not-allowedon disabled controls so the blocked state reads at a glance. - Keep cursors conventional — surprising cursor changes confuse more than they help.
- Pair
grabwithgrabbingon drag handles so the cursor reflects the active state mid-drag.
Accessibility
cursor is mouse-only feedback. It tells a sighted pointer user something is interactive, but a keyboard user never sees it and a screen reader never announces it. So cursor: pointer on a plain <div> is a classic trap: it looks like a button without being one.
The fix is to make the element genuinely interactive — a native <button> or link that is focusable, operable with the keyboard and announced with the right role. Let the cursor be the finishing touch on top of real semantics, never a substitute for them.
Frequently asked questions
How do I change the cursor to a hand in CSS?
cursor: pointer on the element. That shows the pointing-hand cursor used to signal something is clickable.Does cursor: pointer make an element clickable?
<button> or link.How do I show a not-allowed cursor for disabled buttons?
cursor: not-allowed, often on a :disabled rule, e.g. button:disabled { cursor: not-allowed; }.Can I use a custom image as a cursor?
url() form: cursor: url(cursor.png), auto;. Always list a generic fallback like auto after it in case the image cannot load.