SVG Rect Rounded Corners Guide and Attributes

Creating rounded corners on an SVG rectangle involves applying specific corner radius attributes alongside standard geometric dimensions. This guide explains the core parameters—rx and ry—required to configure an SVG <rect> element with rounded corners, detailing how these attributes work individually and in combination to produce symmetrical or elliptical curves.

Required and Key Attributes for <rect>

To render an SVG rectangle, standard geometry parameters must first be defined:

• width: Defines the horizontal size of the rectangle.
• height: Defines the vertical size of the rectangle.
• x (optional): The x-axis coordinate of the top-left corner (defaults to 0).
• y (optional): The y-axis coordinate of the top-left corner (defaults to 0).

Parameters for Rounded Corners

To round the corners of an SVG <rect>, use the following radius attributes:

• rx: Defines the radius of the horizontal curve (x-axis) for the corners.
• ry: Defines the radius of the vertical curve (y-axis) for the corners.

Attribute Interactions and Rules

1. Both rx and ry are defined: If both values are provided and are different, the corners form an elliptical curve with distinct horizontal and vertical radii.
2. Only rx is defined: The browser automatically sets ry equal to rx, resulting in a uniform, circular corner radius.
3. Only ry is defined: The browser automatically sets rx equal to ry, also resulting in a uniform, circular corner radius.
4. Neither is defined (or set to 0): The rectangle renders with sharp, 90-degree corners.
5. Maximum Values: If the specified radius exceeds half the width or half the height of the rectangle, SVG automatically clamps the values to width / 2 and height / 2 respectively.

Example Code

Circular Rounded Corners

Defining only rx creates equal rounding on both axes:

<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
  <rect x="10" y="10" width="180" height="80" rx="15" fill="#007acc" />
</svg>

Elliptical Rounded Corners

Defining distinct values for rx and ry creates asymmetrical curves:

<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
  <rect x="10" y="10" width="180" height="80" rx="30" ry="10" fill="#007acc" />
</svg>