CSS Lesson 20: Cursor


Introduction to CSS Cursor

The CSS Cursor property is a property used to change the default cursor style. Basically, the default cursor is different in the browser of each Operating System. Therefore, to define a default cursor, this property is a great tool!

Possible cursor icon in CSS

The following are the few possible cursor properties which you can use in CSS to display the cursor icon:

  • auto – the cursor automatically adjusts itself accordingly.
  • default – This shows a default icon of the cursor.
  • help – a small question mark with the default cursor.
  • wait – this shows a round icon. To show the computer is processing, you should use this cursor icon.
  • crosshair – a cross shaped icon.
  • pointer – a hand icon normally appears when you hover your mouse over text or a link.
  • text – this icon represents selecting text. It looks “I” shaped.
Source Code Output

Auto Cursor icon

defualt Cursor icon

Wait Cursor icon

Crosshair Cursor icon

Pointer Cursor icon

Text Cursor icon

[tooltip]Move your mouse over the text, and you’ll see the results.[/tooltip]

Cursor on Images

In addition to text, you can also place a cursor over an image. Here’s a demonstration:

Source Code Output

List of Cursor properties

Above are a few possible properties, here’s the complete List of CSS Cursor Properties.


  • CSS Cursor property is used to change the default cursor style.
  • You can change the cursor style of image as well.

Leave a Reply