Contents hide 1) Cursor 1.1) Browser Support 2) Browser-Specific Cursors 2.1) Browser Support 3) Custom Cursors In this tutorial, we will see how to Change Cursor Style Using Its Properties In CSS. There is a lot of option to use those cursor for particular elements on your web page. Cursor Browser-Specific Cursors Custom Cursors Cursor The cursor CSS property specifies the mouse cursor displayed when the mouse pointer is over an element. In this tutorial, weβre going to see the CSS cursor property which, as youβd expect, allows you to change the cursor style as the mouse hover over an element. Itβs become increasingly important for making user interact with the web application. As the cursor shows the sign and symbol to perform any action over an element. let us see some styles for properties of the cursor. .auto { cursor: auto; } .default { cursor: default; } .none { cursor: none; } .context-menu { cursor: context-menu; } .help { cursor: help; } .pointer { cursor: pointer; } .progress { cursor: progress; } .wait { cursor: wait; } .cell { cursor: cell; } .crosshair { cursor: crosshair; } .text { cursor: text; } .vertical-text { cursor: vertical-text; } .alias { cursor: alias; } .copy { cursor: copy; } .move { cursor: move; } .no-drop { cursor: no-drop; } .not-allowed { cursor: not-allowed; } .all-scroll { cursor: all-scroll; } .col-resize { cursor: col-resize; } .row-resize { cursor: row-resize; } .n-resize { cursor: n-resize; } .e-resize { cursor: e-resize; } .s-resize { cursor: s-resize; } .w-resize { cursor: w-resize; } .ns-resize { cursor: ns-resize; } .ew-resize { cursor: ew-resize; } .ne-resize { cursor: ne-resize; } .nw-resize { cursor: nw-resize; } .se-resize { cursor: se-resize; } .sw-resize { cursor: sw-resize; } .nesw-resize { cursor: nesw-resize; } .nwse-resize { cursor: nwse-resize; } You can set your cursor style for any element that to be showed over a hover of an element. See the Pen Properties of Cursors in CSS by rehmaanali (@geekstrick) on CodePen. Browser Support This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up. chrome Opera Firefox IE Edge Safari 5 15 4 9 14 5 NOTE: Css Will Not Applyed On Mobile Browsers Browser-Specific Cursors Mozilla and some editions of Chrome and Safari offer a number of vendor-prefixed cursor styles which are likely to become part of the CSS3 specification: .-moz-grab { cursor: -webkit-grab; cursor: -moz-grab; } .-moz-grabbing { cursor: -webkit-grabbing; cursor: -moz-grabbing; } .-moz-zoom-in { cursor: -webkit-zoom-in; cursor: -moz-zoom-in; } .-moz-zoom-out { cursor: -webkit-zoom-out; cursor: -moz-zoom-out; } This are the WebKit for the browsers which have additional features in it as you can see in the demo See the Pen Properties of Cursors in CSS β Browser-Specific Cursors by rehmaanali (@geekstrick) on CodePen. Browser Support This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up. chrome Opera Firefox IE Edge Safari 4* 11.6 2* NO 12 3.1* NOTE: Css Will Not Applyed On Mobile Browsers Custom Cursors Finally, you can create your own cursor graphic, e.g. .one { cursor:url(http://cursors2.totallyfreecursors.com/thumbnails/1pointer31.gif), auto; } .two { cursor:url(http://cursors0.totallyfreecursors.com/thumbnails/1pointer51.gif), auto; } .three { cursor:url(http://www.cursor.cc/cursor/263/42/cursor.png), auto; } This will load the images from the link and shows as a cursor, Letβs see the demo See the Pen Properties of Cursors in CSS β Graphic Cursor by rehmaanali (@geekstrick) on CodePen. Internet Explorer requires a Windows cursor file (.cur). Firefox, Chrome, and Safari require an image β Iβd recommend a 24-bit alpha-transparent PNG. Firefox also requires a second non-URL cursor fallback value. Itβs not supported in Opera. x and y are optional properties in Firefox, Chrome, and Safari which define the precise pointer position from the top-left of the graphic. If omitted, 0 0 is assumed. Get Some More CSS Here! Share this:TwitterFacebookRedditLinkedInWhatsAppPrintTumblr Related Tags: css3, cursors, html5, properties