Create your own custom cursor (mouse pointer) for your web page.

You can change the mouse pointer for the your web page or a specific html element.

Generally we use the cursor property in css that specifies the type of cursor to be displayed when pointing on an element. Such as:

#div1 {cursor:crosshair}
#div2 {cursor:wait}

Sometimes you may want to replace your cursor with a your own created cursor. This article will show you how to do it.

Firstly you need to create your own cursor file (however you can change the cursor without creating new one, you can use an image file).There are several tools available to design the cursor. In this post I am using a online tool( to create my own cursor file.

Go to and start drawing and download the cursor.cur file when you are finished.

Design new Custom Cursor
Design new Custom Cursor on

After download the .cur file. Place this file in your image directory of your website.and use the following css for replace the cursor:

#div1 {cursor:url(image/cursor.cur), auto;}

If you want to use this cursor in entire page, set the cursor css property of the body tag like as:

body{ cursor: url('image/cursor.cur'), auto;}