The shape attribute on an <area> tag specifies the shape of an image-map area.
Shape can be defined as circle, rectangle, and polygon.
Three <area> tags with a shape attribute
Two areas are rectangular and one is a circle.
<img src="/img/html/computer-map.png" alt="Computer" usemap="#computermap">
<map name="computermap">
<area shape="rect" coords="253,142,16,2" alt="Screen" href="javascript:alert('Screen was clicked');">
<area shape="rect" coords="262,218,0,156" alt="Keyboard" href="javascript:alert('Keyboard was clicked');">
<area shape="circle" coords="267,234,22" alt="Mouse" href="javascript:alert('Mouse was clicked');">
</map>
The shape attribute specifies the shape of an image map area.
Together with coords, this attribute describes the area size, shape, and placement.
The shape can be rectangular, circular, polygonal, or the entire area.
<area shape="default | rect | circle | poly" />
| Value | Description |
|---|---|
| default | Covers the entire area region. |
| rect | Covers a rectangular region. |
| circle | Covers a circular region. |
| poly | Covers a polygonal region. May have any number of coordinates. |
Here is when shape support started for each browser:
 Chrome
|
1.0 | Sep 2008 |
 Firefox
|
1.0 | Sep 2002 |
 IE/Edge
|
1.0 | Aug 1995 |
 Opera
|
1.0 | Jan 2006 |
 Safari
|
1.0 | Jan 2003 |
