Skip to content
Related Articles

Related Articles

Improve Article

How to set different type of cursors using CSS ?

  • Last Updated : 26 May, 2021

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
Recommended Articles
Page :