Updated .rounded utilities

[mdo]

#30048 is out of date, and I'm second guessing renaming the utilities. @ffoodd and @MartijnCuppens help me out—should we rename these classes all from rounded to radius? Should we even both changing the size scale to a numbered scale?

Fixes #29989.
Closes #30048.
Closes #31784 (classes can now be expanded and made responsive with utilities API).

[ffoodd]

About size scale, I'd go for number. -sm et all are heavily used through utilities for responsiveness, and I think this should be considered as a convention.

Using them in components (eg buttons) is another context, another convention. We may have to document our namings somewhere, would help a lot to spot inconsistencies and name newcomers.

[ffoodd]

And I'd be in favor of radius, but that doesn't seem much important IMHO.

But naming conventions (↑) could help in that sort of case (eg. follow CSS properties / HTML elements to ease discoverability).

[mdo]

I think leaving it as rounded for now is fine. We can ask folks in our next release and tackle with the beta IMO. Otherwise I think this is good to go!

[pricop]

+1 for the -sm -md -lg. Let the numbers available for us if we want to implement rounded classes based on a percentage.

[harnishdesign]

We are use radius size (rounded-3) scaling classes with any one of rounded-top, rounded-start, rounded-end, rounded-bottom. So, does not override border radius size scale as like rounded-3. it does show default rounded size.

Does not work properly in below situation.
Start rounded corner does in default size and end rounded corner size scale as rounded-3. but, We think, Here, It should Start rounded corner size scale as rounded-3 and should end rounded corner size is 0(none).

<img src="..." class="rounded-start rounded-3" alt="...">