logo

HTML shape attribute

The shape attribute represents the shape to be created on an image.

<img src="files/three images.jpg" usemap="#shapes" alt="three shapes of triangle, square, circle">
<map name="shapes">
  <area href="blue.html" shape="circle" coords="196,89,33" >
</map>
</>
three shapes of triangle, square, circle

Attribute values

All possible values of shape attribute

shape='circle'

It represents a shape of a circle. It has three points. The syntax to define the shape of a circle.

<area href="URL" shape="circle" coords="X,Y,R">

  • X is the distance from the center of the circle to the left side of the image.

  • Y is the distance from the center of the circle to the top side of the image.

  • R is the radius of the circle.

shape='rectangle'

It defines a shape of a rectangle. A rectangle has four points. The syntax to make a shape of the rectangle.

<area href="URL" shape="rectangle" coords="A,B,C,D">

shape='polygon'

A polygon has more than one points. And a point has two coordinates (one coordinate is the distance from the left edge of the image and the other one is the distance from the top edge of the image). For example, hexagon, heptagon or more shapes.

shape='default'

The default shape is the whole image. The default shape has 0 coordinates.

Related Tags

The tags that support shape attribute

<area> tag

<area> element represents a link corresponding to an area on an image.

Was this article helpful?