r

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2020.

The r CSS property defines the radius of a circle. It can only be used with the SVG element. If present, it overrides the circle's r attribute.

Note: The r property only applies to elements nested in an . It doesn't apply to other SVG elements or HTML elements or pseudo-elements.

Syntax

css
/* Length and percentage values */
r: 3px;
r: 20%;

/* Global values */
r: inherit;
r: initial;
r: revert;
r: revert-layer;
r: unset;

Values

The and values define the radius of the circle.

Absolute or relative lengths can be expressed in any unit allowed by the CSS data type. Negative values are invalid.

Percentages refer to the normalized diagonal of the current SVG viewport, which is calculated as 2+22.

Formal definition

Initial value0
Applies to element in
Inheritedno
Percentagesrefer to the normalized diagonal of the current SVG viewport
Computed valuethe percentage as specified or the absolute length
Animation typeby computed value type

Formal syntax

r = 
    

 = 
        |

Examples

Defining the radius of a circle

In this example, we have two identical elements in an SVG, each with a 10 radius and the same x- and y-axis coordinates for their center points.

html

With CSS, we style only the first circle, allowing the second circle to use default styles (with (fill defaulting to black). We use the r property to override the value of the SVG r attribute, giving it a fill and stroke. The default size of an SVG is 300px wide and 150px tall.

css
svg {
  border: 1px solid black;
}

circle:first-of-type {
  r: 30px;
  fill: lightgreen;
  stroke: black;
}

ViewBox versus viewport pixels

This example contains two SVGs, each with two elements. The second SVG includes a viewBox attribute to demonstrate the difference between SVG viewBox and SVG viewports.

html

The CSS is similar to the previous example, with r: 30px set, but we set a width to ensure the images are both 300px wide:

css
svg {
  border: 1px solid black;
  width: 300px;
}

circle:first-of-type {
  r: 30px;
  fill: lightgreen;
  stroke: black;
}

Because the viewBox attribute defines the SVG as 200 SVG coordinate system pixels wide, and the image is scaled up to 300px, the 30 SVG coordinate pixels are scaled to be rendered as 45 CSS pixels.

Defining the radius of a circle using percentages

In this example, we use the same markup as the previous example. The only difference is the r value; in this case, we use a percentage value.

css
svg {
  border: 1px solid black;
  width: 300px;
}

circle:first-of-type {
  r: 30%;
  fill: lightgreen;
  stroke: black;
}

In both cases, the circle radius is 30% of the normalized diagonal of the SVG viewport. The radius r is equal to 0.3×2+22. While the first image is using 300 and 150 CSS pixels and the second is using 200 and 100 SVG view box units, 30% is a proportional value. As a result, the r value is the same: 47.43 viewBox units, which resolves to 71.15 CSS pixels.

While the r is the same, the center points differ because the second SVG is scaled up by 50%, pushing its center down and to the right by 50%.

Specifications

Specification
Scalable Vector Graphics (SVG) 2
# R

Browser compatibility

See also