Skip to content
Related Articles

Related Articles

Improve Article
How to set cursor style that indicates any direction scroll using CSS ?
  • Last Updated : 22 Apr, 2021

In this article, we will see how to set the cursor style for any direction using CSS. This style can be created by using all-scroll cursor property. This property sets the cursor that it indicates any direction scroll using CSS. The all-scroll property value indicates that something can be scrolled in any direction.

Syntax:

cursor: all-scroll;

Example 1:

HTML




<!DOCTYPE html>
<html>
  
<head>
    <style>
        #all-scroll {
            cursor: all-scroll;
        }
    </style>
</head>
  
<body>
    <h1 style="color: green">
        Welcome to GeeksforGeeks
    </h1>
  
    <h2 style="font-family: Impact" id="all-scroll">
        Mouse over here to change the
        mouse cursor.
    </h2>
</body>
  
</html>

Output:



Example 2: We can use move property value to set the cursor style.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <style>
        .gfg {
            color: green;
            font-size: 50px;
        }
  
        #all-scroll {
            cursor: all-scroll;
        }
  
        #move {
            cursor: move;
        }
    </style>
</head>
  
<body>
    <h1 style="color: green">
        Welcome to GeeksforGeeks
    </h1>
  
    <h2 id="all-scroll">
        Mouse over here to change the
        mouse cursor using <small class="gfg">
            all-scroll</small> property.
    </h2>
  
    <h2 id="move">
        Mouse over here to change the mouse
        cursor using <small class="gfg">move
        </small> cursor property.
    </h2>
</body>
  
</html>

Output:

Supported Browsers:

  • Google Chrome
  • Edge
  • Mozilla Firefox
  • Opera
  • Safari



My Personal Notes arrow_drop_up
Recommended Articles
Page :