Allow multiple radii for rx & ry in <rect> as per CSS border-radius

[BigBadaboom]

Suggestion:

Allow the rx and ry attributes of <rect> to accept up to four radius values. If there are 2-4 values specified then they would be handled the same way that CSS border-radius is.

top-left top-right bottom-right bottom-left

[progers]

What about just supporting the border-radius property?

[BigBadaboom]

I considered that, but thought that:

1. it's not really a border and might be confusing

2. what happens if someone does this?:

   rect {
      rx: 10;
      border-radius: 15;
   }
   

[tabatkins]

Stroke does map to border, whenever we have to mix CSS and SVG box model terms.

Ugh, I was going to suggest we can address the collision by making rx/ry just be shorthands for the border-radius properties, but we don't currently break those properties apart far enough - we just have the four corners, each of which accepts two values for the x and y. To do the shorthanding we'd need a property for just the x part of a corner.

(We could try and add this, of course.)

[AmeliaBR]

My instinct is to say keep them separate. Strokes are not borders, none of the other border properties apply. They wouldn't make sense if they did, because borders have separate top/right/bottom/left values, but those options don't make sense for non-rectangular shapes.

That said:

If we adopt a syntax for declaring path geometry that uses CSS shapes functions in general (as opposed to only allowing the path() function), then the inset() function allows you to describe a rectangle with customizable curved corners using the border-radius notation.

[jarek-foksa]

I also don't like the idea of calling it "border-radius".

The term stroke is clearly defined and used consistently all over the place in the SVG spec, there is e.g. stroke-miterlimit, paint-order: stroke, vector-effect: non-scaling-stroke, isPointInStroke(), getBBox({stroke: true}), etc.

Being only partially consistent with HTML here would be in my opinion more confusing than not being consistent at all.

[progers]

These are all great points and I now agree that border-radius is just a bad idea.. apologies for the tangent. Reusing the syntax but under a different name makes sense to me.

[karip]

There has been some discussion about this kind of feature in the past [1]. The idea was to extend 'rx' and 'ry' properties and also to add 'r' property for paths, so that any path corner could be rounded.

Anyway, I give a thumbs up for this feature. :)

[1] https://www.w3.org/2012/09/19-svg-minutes.html#item16