# CSS: “cursor”: “hand” is not a “cursor” value.

> Canonical HTML version: https://rocketvalidator.com/html-validation/css-cursor-hand-is-not-a-cursor-value
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

The CSS `cursor` property controls the appearance of the mouse pointer when it hovers over an element. The value `hand` was introduced by early versions of Internet Explorer (IE 5.5 and earlier) as a proprietary extension to show a pointing-hand cursor over clickable elements. However, this value was never part of any CSS specification, and no other browser adopted it. The W3C-standard equivalent is `pointer`, which has been supported by all browsers — including Internet Explorer 6 and later — for over two decades.

When the W3C validator encounters `cursor: hand`, it flags it as an invalid value because `hand` does not exist in the CSS specification's list of accepted `cursor` values. While some legacy browsers may still interpret it, modern browsers will simply ignore the invalid declaration, meaning your clickable elements won't display the expected hand cursor for many users.

Beyond validation, using non-standard CSS values can cause inconsistent behavior across browsers and platforms. The `pointer` value is universally supported and is the correct way to signal that an element is interactive, such as a link, button, or any custom clickable region.

To fix this issue, replace every instance of `cursor: hand` with `cursor: pointer` in your stylesheets. If you need to support extremely old versions of Internet Explorer (IE 5.5 or earlier), you can declare both values — the browser will use whichever it recognizes — though this is almost never necessary today.

## Examples

### Invalid CSS

The value `hand` is not recognized by the CSS specification and will trigger a validation error:

```css
.clickable {
  cursor: hand;
}
```

### Valid CSS

Use the standard `pointer` value instead:

```css
.clickable {
  cursor: pointer;
}
```

### Using it in context with HTML

```html
<style>
  .card {
    padding: 16px;
    border: 1px solid #ccc;
    cursor: pointer;
  }
</style>

<div class="card">
  Click me to view details
</div>
```

### Legacy fallback (rarely needed)

If for some reason you must support IE 5.5 or earlier alongside modern browsers, you can provide both declarations. The browser will apply the last value it understands:

```css
.clickable {
  cursor: hand;
  cursor: pointer;
}
```

Note that this fallback pattern will still produce a validation warning for the `hand` value. In practice, there is virtually no reason to support browsers this old, so using `cursor: pointer` alone is the recommended approach.

## Common `cursor` values

For reference, here are some of the most frequently used valid `cursor` values defined in the CSS specification:

- `auto` — the browser determines the cursor based on context (default behavior)
- `default` — the platform's default cursor, typically an arrow
- `pointer` — a pointing hand, indicating a link or clickable element
- `text` — an I-beam, indicating selectable text
- `move` — indicates something can be moved
- `not-allowed` — indicates an action is not permitted
- `grab` / `grabbing` — indicates a draggable element
- `crosshair` — a precise selection cursor
- `wait` — indicates the program is busy
- `help` — indicates help is available

The full list of accepted values is defined in the [CSS Basic User Interface Module](https://www.w3.org/TR/css-ui-4/#cursor) specification.