How to set the cursor style on browser using CSS ?

Last Updated : 14 Apr, 2021

The cursor property in CSS is used to specify the type of mouse cursor to be displayed when pointing over an element. By default, all the browser’s cursor is set to the pointer. And if we want to customize it, we can do it with the help of CSS. By default, the value of the cursor property is set to ‘auto’. Also, mentioning the value auto to the cursor property is not necessary as by default it already is set to auto.

Syntax:

cursor: value;

Property Value: It specifies the value of cursor property. Please check this article to see all values of cursor property.

Example: In this example, we will set the cursor property value to crosshair i.e. ‘cursor: crosshair’ to display the cursor as crosshair.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <style>
        .cursor {
            cursor: crosshair;
        }
    </style>
</head>
 
<body style="text-align:center;">
    <h1 style="color:green;">
        GeeksforGeeks
    </h1>
 
    <p class="cursor">
        GfG, A computer Science Portal for Geeks
    </p>
 
</body>
 
</html>