HTML <area> shape Attribute

The shape attribute on an <area> tag specifies the shape of an image-map area, such as, circle, rectangle, and polygon.

Example

#

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');">
</map>

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.


Syntax

<area shape="default | rect | circle | poly" />

Values

#

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:

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

You may also like

 Back to <area>
Guides