How to set different type of cursors using CSS ?
Last Updated :
05 Aug, 2025
Improve
In this article, we will learn how to set different types of cursors using CSS. The cursor CSS is used to specify the kind of mouse cursor when the mouse pointer is over an element. By using it, we may choose the type of cursor that the user will see. here we use the cursor property.
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 to an element. It takes a value which is the type of cursor.
Syntax:
cursor: value
Example 1: In this example, we are using the above-explained method.
<!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>
<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: Here is another example of using the cursor property.
<!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>
<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:
