rx

Sets the horizontal radius of an SVG <ellipse> or the corner rounding radius of a <rect>. It allows you to create rounded rectangles directly from CSS.

It is documented as part of the Scalable Vector Graphics specification.

/* Usage Example */
rect.card {
  /* Rounds the horizontal corners of the SVG rectangle */
  rx: 15px;
}

/* Global values */
rx: inherit;
rx: initial;
rx: revert;
rx: revert-layer;
rx: unset;
Widely available Since 2020 94% global usage

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

43+
69+
17.4+
79+
Kinsta

Your first month is free

Managed WordPress hosting for faster sites.

Learn more

New CSS drops.

Join 600+ readers who've survived clearfix hacks.

ESC