CSS Cursors

In this tutorial you will learn about the CSS Cursors and its application with practical example.

When using computer we have seen many different style for mouse cursor icons. A normal mouse cursor icon looks like a “I” symbol or a skewed arrow when selecting text. CSS Cursors property enables us to change the type of cursor to be displayed when pointing on an element.

Table Of Contents

Here is the list of available cursor style –

CSS Cursor Value Result
crosshair
Mouse cursor is set to crosshair
pointer
Mouse cursor is set to pointer
text
Mouse cursor is set to text
move
Mouse cursor is set to move
wait
Mouse cursor is set to wait
help
Mouse cursor is set to help
progress
Mouse cursor is set to progress
not-allowed
Mouse cursor is set to not-allowed
no-drop
Mouse cursor is set to no-drop
no-vertical-text
Mouse cursor is set to no-vertical-text
all-scroll
Mouse cursor is set to all-scroll
col-resize
Mouse cursor is set to col-resize
row-resize
Mouse cursor is set to row-resize
e-resize
Mouse cursor is set to e-resize
ne-resize
Mouse cursor is set to ne-resize
n-resize
Mouse cursor is set to n-resize
nw-resize
Mouse cursor is set to nw-resize
w-resize
Mouse cursor is set to w-resize
sw-resize
Mouse cursor is set to sw-resize
s-resize
Mouse cursor is set to s-resize
se-resize
Mouse cursor is set to se-resize

In this tutorial we have learn about the CSS Cursors and its application with practical example. I hope you will like this tutorial.