What do the X and Y in topLeftRadiusX and topLeftRadiusY on a border do?

Question

In some graphics programs there are corner radius values that are cornerRadiusX and cornerRadiusY. I have even seen topLeftRadiusX and topLeftRadiusY plus six more properties; 2 properties per corner .

For example there is this FXG / SVG code,

    <s:Rect id="lowlight" left="1" right="1" top="1" bottom="1" topLeftRadiusX="4" topRightRadiusX="4">
    </s:Rect>

I've never seen topLeftRadiusX and topLeftRadiusY used together but then again I've never seen them used very much at all.

What are they for and how do they affect the graphic?

Answer 1

They allow you to have rounded corners that are elliptical rather than circular.

<svg width="100" height="100">
  <rect width="200" height="200" rx="80" />
</svg>

<svg width="100" height="100">
  <rect width="200" height="200" rx="50" ry="80"/>
</svg>