CSS cursor

As you probably know, the CSS cursor property specifies the type of cursor to be displayed when pointing on an element. Initially, there were relatively few cursor styles, but thanks to CSS2 and CSS3 we have more styles to choose from. This gives us new opportunities in developing interactive layouts and apps.

CSS cursor property has plenty of different values which define diverse cursor styles and eventual actions. The syntax of this CSS property is quite simple:

cursor: value;

Where value is a certain value of the property. For example, this cursor value will display a resize-like cursor, when we’ll point our cursor over an element:

cursor: col-resize;

Some of modern web browsers don’t support all the values of CSS cursor property. So, how to check up if your browser supports certain values of CSS cursor property? You can go here and check most common values or you can access this great website (created by Anush from Tech Stream) and quickly find out if your browser supports the cursor type you need. Simply hover on any cursor style and see if it works in your browser, as simple as that! No more stress and wasted time.

Anush was happy to tell us a few words about his project, here is what he told us:

I started this project on 4th Nov, 2015 (when I made the first commit on git :). I initially created this to teach a couple of friends some JavaScript, but I couldn’t do this without making a project. The previous day I had worked to get a perfect cursor for my new project and I thought it would be a great showcase. It turned out that my JavaScript project was the best way to teach my friends.

If you know some similar tools or resources, let us know. Let’s show them to the world.

You may also like