<rect>

Usage context

Attributes

x

The x coordinate of the rect. Value type: <length> | <percentage>; Default value: 0; Animatable: yes

y

The y coordinate of the rect. Value type: <length> | <percentage>; Default value: 0; Animatable: yes

width

The width of the rect. Value type: auto | <length> | <percentage>; Default value: auto; Animatable: yes

height

The height of the rect. Value type: auto | <length> | <percentage>; Default value: auto; Animatable: yes

rx

The horizontal corner radius of the rect. Defaults to ry if it is specified. Value type: auto | <length> | <percentage>; Default value: auto; Animatable: yes

ry

The vertical corner radius of the rect. Defaults to rx if it is specified. Value type: auto | <length> | <percentage>; Default value: auto; Animatable: yes

pathLength

The total length of the rectangle's perimeter, in user units. Value type: <number>; Default value: none; Animatable: yes

DOM Interface

This element implements the SVGRectElement interface.

Example

html,
body,
svg {
  height: 100%;
}

<svg viewBox="0 0 220 100" xmlns="http://www.w3.org/2000/svg">
  <!-- Regular rectangle -->
  <rect width="100" height="100" />

  <!-- Rounded corner rectangle -->
  <rect x="120" width="100" height="100" rx="15" />
</svg>

Specifications

Browser compatibility

See also

• SVG presentation attributes including fill and stroke
• Other basic SVG shapes: <circle>, <ellipse>, <line>, <polygon>, <polyline>