Set multiple strokes or corner radiuses at once with shorthand

If you select an Auto Layout, you can set different values for each side of the horizontal or vertical padding by entering two numbers, separated by a comma.

For example, if you enter 2,8 as the horizontal padding, that will set the left padding to 2px and the right padding to 8.

This is great — but what would be even better is if you could do the same for corner radius and stroke widths.

I’m imagining that it would work similar to CSS shorthand properties.

For stroke widths:

  • If there are four values, they are applied clockwise: first top, then right, then bottom, then left
  • If there are two values, the first one is used for top and bottom, the second is for left and right
  • If there are three values, the first one is for top, the second is for right and left, and the third is for bottom

For corner/border radiuses:

  • If there are four values, they are applied clockwise: first top-left, then top-right, then bottom-right, then bottom-left
  • If there are two values, the first one is used for top-left and bottom-right, the second is for bottom-left and top-right
  • If there are three values, the first one is for top-left, the second is for top-right and bottom-left, and the third is for bottom-right

I would also suggest using a semicolon as the separator to account for languages (such as German) where commas are used as the decimal separator, rather than periods.

Thanks!