CSS Property: cursor

The CSS cursor property, your mouse’s personal wardrobe, dictates the type of cursor displayed when the mouse pointer hovers over an element. It lets your users know what kind of action they can perform, kind of like a digital traffic signal. It’s a small detail, but one that can greatly enhance your site’s user experience!

Syntax

The syntax for our cursor property is a piece of cake.

1	cursor: value;

By default, the cursor takes the auto value, which lets the browser decide what cursor to display based on the context.

This chameleon-like property can be applied to all HTML elements, except for (drumroll, please)… some elements in <head>. So, every visual HTML element is a playground for the cursor property.

While you might be hoping to make that cursor do a little jig across the screen, CSS animations can’t be applied to the cursor property. So, no dancing cursors, sadly.

The cursor property is inherited by child elements from their parent.

Cursory Example

Use the dropdown to switch the type of mouse cursor displayed when hovering over the div:

Please accept marketing cookies to load this content.

Keyword Values

Let’s take a tour through the various outfits available in the cursor wardrobe.

default

1	cursor: default;

This is the “everyday jeans and t-shirt” of your cursor’s closet. It’s the default shape of your cursor, typically an arrow.

As you’ve seen in the demo above, there are many, many keywords you can use to display a specific cursor for all kinds of situations:

auto
default
none
context-menu
help
pointer
progress
wait
cell
crosshair
text
vertical-text

alias
copy
move
no-drop
not-allowed
e-resize
n-resize
ne-resize
nw-resize
s-resize
se-resize
sw-resize

w-resize
ew-resize
ns-resize
nesw-resize
nwse-resize
col-resize
row-resize
all-scroll
zoom-in
zoom-out
grab
grabbing

url

You can also customize cursors with your images using the url function. Yes, your cursor can wear a picture too! It’s like your cursor’s personal photo shoot.

1	.element {
2	cursor: url('cursor.png'), auto;
3	}

Remember to always provide a generic cursor as a fallback, like auto, in case the custom cursor or a specific keyword is not supported.

x,y

The CSS cursor property can optionally utilize x and y coordinates to set a hot spot, the exact point within your custom cursor image that will be the position of the pointer, like so:

1	.element {
2	cursor: url('custom.png') 4 12, auto;
3	}

In this code, 4 12 are the x and y coordinates of the hot spot respectively within the “custom.png” image; this means the cursor’s active point is 4 pixels from the left and 12 pixels from the top of the image.

Learn More

“Spend time understanding the cursor property. It’s a small touch that can help you control a fine detail, an oft-overlooked aspect of web design that can really enhance the experience” - Chris Coyier