Therx attribute defines a radius on the x-axis.

You can use this attribute with the following SVG elements:

• <ellipse>
• <rect>

Example

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

<svg viewBox="0 0 300 200" xmlns="http://www.w3.org/2000/svg">  <ellipse cx="50" cy="50" rx="0" ry="25" />  <ellipse cx="150" cy="50" rx="25" ry="25" />  <ellipse cx="250" cy="50" rx="50" ry="25" />  <rect x="20" y="120" width="60" height="60" rx="0" ry="15" />  <rect x="120" y="120" width="60" height="60" rx="15" ry="15" />  <rect x="220" y="120" width="60" height="60" rx="150" ry="15" /></svg>

ellipse

For<ellipse>,rx defines the x-radius of the shape. With a value lower or equal to zero the ellipse won't be drawn at all.

rect

For<rect>,rx defines the x-axis radius of the ellipse used to round off the corners of the rectangle.

The way the value of therx attribute is interpreted depend on both thery attribute and the width of the rectangle:

• If a properly specified value is provided forrx but not forry (or the opposite), then the browser will consider the missing value equal to the defined one.
• If neitherrx norry has a properly specified value, then the browser will draw a rectangle with square corners.
• Ifrx is greater than half of the width of the rectangle, then the browser will consider the value forrx as half of the width of the rectangle.

Specifications

See also

• CSSrx property