HTML <area> shape Attribute

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.

Computer Screen Keyboard Mouse
<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');">

Using shape

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.

Browser support

Here is when shape support started for each browser:

1.0 Sep 2008
1.0 Sep 2002
1.0 Aug 1995
1.0 Jan 2006
1.0 Jan 2003

You may also like

 Back to <area>

Last updated on Sep 30, 2023