The CSS Cursor

Google+ Pinterest LinkedIn Tumblr +

For the computer screen, the cursor is the mouse pointer. CSS allows you to give different shapes to this cursor. In this article, I give you the names of the different shapes, the descriptions of the shapes and code samples indicating how you can create them.

CSS is now at version 2. Version 1 did not say anything about the cursor. The information given you here is based on the CSS2 specification.

You need basic knowledge in CSS in order to understand this article.

Note: If you cannot see the code or if you think anything is missing in this article (broken link, image absent), just contact me at That is, contact me for the slightest problem you have about what you are reading.

Giving the Cursor a Shape
To give a cursor a shape, you need a cursor/value pair in the declaration block for the CSS rule of the element concerned. The cursor property can take many values. You give the cursor a particular shape by giving a particular value to the cursor property. In this article I give you the names of the values (shapes) and their meanings. When the mouse pointer is over an element (or over the property of the element) the mouse pointer takes the shape, which the value of the cursor property specifies for that element. For this article, the cursor and the mouse pointer mean the same thing.

Now let us look at the values and examples. In many of the examples an HTML Paragraph element whose width is 30% that of the BODY width is used.

With this value, the browser determines the shape of the cursor based on the current content. This is usually the same as not having any cursor/value pair in the style sheet. When you do not have any cursor/value pair in the style sheet, the browser normally determines the shape of the cursor based on the current context.
This shape is a simple crosshair, like short line segments resembling a “+” sign. Try the following code that illustrates this for the Paragraph element. When the browser is displaying the paragraph, move the mouse pointer over it and note the shape of the mouse pointer.


About Author

Leave A Reply