In this section, we will learn what the cursor property is and how to use it in CSS.

Click here to run the example of cursor property.

Mouse Pointer in CSS: CSS cursor Property Definition and Usage

The CSS `cursor` property is used to change the shape of the mouse cursor.

Basically, when you have an element and want the mouse cursor (AKA pointer) to have another shape when it comes to the boundary of that element, we can use the `cursor` property.

CSS cursor Property Syntax

cursor: value;

Cursor Type in CSS: CSS cursor Property Value

Here’s the list of values we can use for this property.

• alias
• all-scroll
• auto
• cell
• context-menu
• col-resize
• copy
• crosshair
• default
• e-resize
• ew-resize
• grab
• grabbing
• help
• move
• n-resize
• ne-resize
• nesw-resize
• ns-resize
• nw-resize
• nwse-resize
• no-drop
• none
• not-allowed
• pointer
• progress
• row-resize
• s-resize
• se-resize
• sw-resize
• text
• URL
• vertical-text
• w-resize
• wait
• zoom-in
• zoom-out
• initial
• inherit

Note: the best way to see the result of using these values for this property is to check the live demo we’ve created at the beginning of this section.

Example: cursor pointer in CSS

See the Pen cursor pointer in CSS by Omid Dehghan (@enjoytutorials1) on CodePen.

How Does CSS cursor Property Work?

For this example, we’ve set the cursor property to “wait” and so when the mouse pointer enters the boundary of the div element, it will take the shape of waiting cursor.