Rectangle

A rectangle can be created with the <rect> tag. When doing so, the x and y coordinates of the upper left corners as well as the width and height must be specified. The area can be colored using the fill attribute.

You can also generate rectangles with rounded corners in the editor by also entering the x/y radius. If you specify only the x-radius rx, the y-radius is automatically set to the same value. The maximum number you can specify for the radius is half the corresponding side. If you only set the y-radius in the shape editor, nothing changes; the corners of the rectangle are not rounded. However, you can also set different rx and ry values.

x

x-coordinate of the upper left corner

y

y-coordinate of the upper left corner

width

Width of the rectangle

height

Height of the rectangle

rx

Horizontal corner radius

ry

Vertical corner radius

<rect width="200" height="100" rx="10" ry="5" fill="#00B6A8" />
../../../_images/rect.png