HTML Dog
Skip to navigation

CSS Property: cursor

The appearance of the cursor when it passes over a box.

Possible Values

ValueDescriptionExample
defaultThe platform’s default cursor. Usually an arrow.
crosshairA thin plus-sign-like cross.
helpIndicates that there is help for the element that is being hovered over. Usually a question mark.
moveIndicates something that should be moved. Usually a four-way arrow.
n-resizeIndicates something that should be scaled upwards. Usually an up-pointing arrow.
ne-resizeIndicates something that should be scaled upwards and to the right. Usually an up-right-pointing diagonal arrow.
e-resizeIndicates something that should be moved to the right. Usually a right-pointing arrow.
se-resizeIndicates something that should be moved downwards and to the right. Usually a down-right-pointing diagonal arrow.
s-resizeIndicates something that should be moved downwards. Usually a down-pointing arrow.
sw-resizeIndicates something that should be moved downwards and to the left. Usually a down-left-pointing diagonal arrow.
w-resizeIndicates something that should be moved to the left. Usually a left-pointing arrow.
nw-resizeIndicates something that should be moved upwards and to the left. Usually an up-left-pointing diagonal arrow.
textIndicates text. Usually an I-beam.
pointerIndicates a link. Usually a pointing hand.
progressIndicates that the program is processing something, but that it can still be interacted with. Commonly an arrow coupled with a timer.
waitIndicates that the user should wait while a program is busy. Commonly a timer.
autoChanges depending on the situation. Default.
[URL], [value]A comma-separated list of images to be used as a custom cursor. If the first isn’t found or isn’t compatible, the browser will move on to next in the list. The list should end with one of the above value keywords to act as a fallback.url("pointer.png"), auto
inherit
initial
unset

Example


abbr { cursor: help; }