CSS cursor Property

What You’ll Learn

The cursor property controls the mouse pointer over any element — a small CSS detail that makes interfaces feel clearer and more interactive.

Introduction

The cursor property in CSS is used to specify the type of cursor to be displayed when pointing over an element. This property helps enhance the user experience by providing visual feedback about the interactive nature of various elements, such as links, buttons, and draggable items.

Definition and Usage

Apply cursor to any element where the pointer appearance should change on hover. Use it alongside semantic HTML and accessible focus styles — the cursor is a visual hint, not a substitute for proper markup.

📝 Syntax

The syntax for the cursor property is straightforward. You can apply it to any element that you want to change the cursor for.

element {
  cursor: value;
}

Here, value can be a predefined cursor keyword, a URL to an image file, or multiple values as a fallback list.

Basic Example

button {
  cursor: pointer;
}

Default Value

The default value of the cursor property is auto, which means the browser will determine the cursor type based on the context (e.g., text cursor for text fields, pointer cursor for links).

Syntax Rules

• Use keyword values for standard system cursors.
• Custom cursors require a fallback keyword after the URL list.
• The property is inherited — children use the parent cursor unless overridden.
• Match cursor style to actual behavior (don’t use pointer on non-clickable elements).
• Some keywords like grab and zoom-in may look different across operating systems.

💎 Property Values

The cursor property accepts keyword values, custom image URLs, and fallback keywords.

When to Use Each Cursor

Examples Gallery

In this example, we’ll change the cursor to a pointer when hovering over a button — plus patterns for disabled states, drag interactions, and multiple cursor types.

<style>
  button {
    cursor: pointer;
  }
</style>

<button>Hover over me!</button>

.btn-disabled {
  cursor: not-allowed;
}

.card {
  cursor: grab;
}

.card:active {
  cursor: grabbing;
}

.cursor-text { cursor: text; }
.cursor-help { cursor: help; }
.cursor-wait { cursor: wait; }
.cursor-crosshair { cursor: crosshair; }
.cursor-move { cursor: move; }

💡 Best Practices