Skip to content
Related Articles

Related Articles

How to set different type of cursors using CSS ?

Improve Article
Save Article
  • Last Updated : 26 May, 2021
Improve Article
Save Article

In this article, we will learn how to set different types of cursors using CSS. The cursor property is used to set different types of cursors using CSS. With the help of the cursor property, we can specify the mouse cursor to be displayed while pointing on an element. It takes a value which is the type of cursor.

Syntax:

cursor: value

Example 1:

HTML




<!DOCTYPE html>
<html>
<head>
    <style>
        div{
            color: green;
            cursor: all-scroll;
            border: solid 2px red;
            margin: 10% 30%;
            width: 30%;
        }
    </style>
</head>
  
<body>
    <div class="gfg">
        <h1>GeeksforGeeks</h1>
        <p>
            Mouse over the div to change 
            the mouse cursor.
        </p>
  
    </div>
</body>
  
</html>

Output:

Example 2:

HTML




<!DOCTYPE html>
<html>
  
<head>
    <style>
        div{
            color: green;
            cursor: zoom-in;
            border: solid 2px red;
            margin: 10% 30%;
            width: 30%;
        }
    </style>
</head>
  
<body>
    <div class="gfg">
        <h1>GeeksforGeeks</h1>
        <p>
            Mouse over the div to change 
            the mouse cursor.
        </p>
  
    </div>
</body>
  
</html>

Output:


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!