"<rect>"

Creates a rectangle with the top-left corner at (x, y) and the specified width and height, optionally with rounded corners.

• DOM object: SVGRectElement
• SVG2 spec: https://www.w3.org/TR/SVG2/shapes.html#RectElement

The <rect> element draws an axis-aligned rectangle. You give it a top-left corner (x, y) and a width and height, and SVG fills the enclosed area with fill and outlines it with stroke. Set the optional rx and ry attributes to round the corners — useful for buttons, badges, and card backgrounds. To rotate or skew a rectangle, wrap it in a "<g>" with a transform attribute, or apply transform directly.

Use <rect> for backgrounds, panels, buttons, bars in a bar chart, or any other rectangular region. For arbitrary quadrilaterals, use "<polygon>" or "<path>".

<rect x="10" y="50" width="280" height="200" fill="none" stroke="black" />

<rect x="10" y="50" width="280" height="200" rx="50" ry="40" fill="none" stroke="black" />

Attribute	Default	Description
x	0	Top-left corner X coordinate.
y	0	Top-left corner Y coordinate.
width	0	Width of the rectangle.
height	0	Height of the rectangle.
rx	auto ("auto" on rx/ry)	For rounded corners, the radius of the curve along the X axis.
ry	auto ("auto" on rx/ry)	For rounded corners, the radius of the curve along the Y axis.