Expansion of the 'rounded' classes

[stormriderstudios]

As it stands we have classes which allow us to add rounding to 2 sides (via the top/bottom/left/right classes), 3 sides (by combining the 2 sided classes) and 4 sides (either through combining the 2 sided classes or just "rounded"). We can also control, to some degree, the size of the rounding (large or small).

I'm proposing an expansion of these classes to add the following options:

• Rounding on 1 corner only
  Currently, this is only possible (to my knowledge) by direct CSS

• Size increments for rounding more akin to the margin/padding sizes (0-5)
  This is more of a nicety and I'm aware that the small and large classes match the input controls and buttons.

• Responsive rounding (so adding the intermediate qualifier -md or -lg etc)
  This is probably the trickiest to add, I don't know a whole lot about how the media queries for these are setup but I feel it would be useful to allow rounding on larger screens, where there is space to have things alongside each other, but revert to full-width stripes on smaller displays.

I realise that this is really 3 requests and that it's no small undertaking but I feel that each tweak has its own merit.

[Sukriti-sood]

@stormriderstudios assign me this issue.

[ffoodd]

@Sukriti-sood No need to assign issue, simply open a PR referencing it using GitHub keywords (Fixes or Closes for example) and it'd be fine. :)

[Parth-Gupta10]

@stormriderstudios I didn't get the 3rd point you proposed. Can you please elaborate?

[stormriderstudios]

@Parth-Gupta10 Sure, I realise I didn't explain it all that well.

So for example, rounded-top-left would make the top left corner rounded but it would be rounded for all page/screen widths. I'm suggesting adding rounded-md-top-left so that the top left corner would only be rounded on screens of medium width or higher.

I understand this is a niche use case (all the additions I've proposed are niche, to be honest) but I envisage something as follows: on larger screens an info box/aside can be rounded, probably not full width but in the flow of text, while on a smaller screen it would be full width with no rounding, so that it acts as a horizontal stripe across the page containing the aside.

I'm really not doing the idea justice here and perhaps I could mock up an image but I hope that clears things up a little for you?

EDIT: Changed the proposed rounded-tl to match rounded-top-left as appears in the pull request

[MartijnCuppens]

Rounding on 1 corner only

Not sure if we really need this by default, thoughts @twbs/css-review?

Size increments for rounding more akin to the margin/padding sizes (0-5)

Sounds good to me. We already have https://github.com/twbs/bootstrap/pull/30048/files open, but this one also includes a name change. This would fix #29989.

Responsive rounding (so adding the intermediate qualifier -md or -lg etc)

Not sure if we need this by default either.

[stormriderstudios]

@MartijnCuppens Thanks for the feedback. I wasn't sure myself on the responsive rounding, I came across a situation where it would be useful to me so suggested it, but I understand that situation is rather niche!

The single corner rounding however I think is relevant, or at least some other method of achieving this - as an alternative perhaps rounding-top rounding-left-0 (excuse the naming/order, used only to show intent) which would return in only the top-right corner being rounded. I can think of a few ways of achieving the same effect but I guess it comes down to what the "bootstrap" way would be (something I'm not 100% on and certainly no authority!)