Bootstrap: Shouldn't border-radius classes (rounded-*) replace element's default border-radius?

[jesobreira]

Let's say we have a button:

<button class="btn btn-primary">Test</button>

It will be applied the .btn's default border-radius, which is a .25rem radius for every corner:

    border-radius: .25rem;

Let's say we only want the left side corners to be rounded. So we do:

<button class="btn btn-primary rounded-left">Test</button>

Nothing changes and every corner (even from right side) is still rounded. It happens because .rounded-left is:

    border-bottom-left-radius: .25rem;
    border-top-left-radius: .25rem;

Shouldn't we add:

    border-bottom-right-radius: 0 !important;
    border-top-right-radius: 0 !important;

Onto .rounded-left so it will change the element's default border radius to be controlled by rounded-* classes?

Or it's meant to be done somehow else?

[andresgalante]

That's an intresting point and usecase of the rounded corner utility classes. I am unsure of what's the expected result, if an utility class should overwrite the defaults styles in this case, but if it's ok with you I'll create a PR today to test this idea.

What do you think?

[morrissey-ingenious]

You can do this by stacking rounded-0 and rounded-left on the button

<button class="btn btn-primary rounded-0 rounded-left">Test</button>

https://codepen.io/morrissey-ingenious/pen/NvZRzg

[andresgalante]

@morrissey-ingenious that works but the idea of resetting styles to set them again is in my opinion a "hack", not intuitive enough.

[morrissey-ingenious]

@andresgalante I would rather not see your PR going in as won't allow things such as rounding everything but the top right corner see my codepen above it has been edited.

<button class="btn btn-primary rounded-0 rounded-left rounded-bottom">Test</button>

[andresgalante]

@morrissey-ingenious Thanks a lot for your help, I honestly haven't consider the case you are showing. You have a really good point by introducing this solution generates other problems.

This also gets twisted once someone wants to do [top-right + bottom left] or [top left + bottom right]

What about creating 4 utility classes?

.rounded-top-left
.rounded-top-right
.rounded-bottom-left
.rounded-bottom-right

better and more flexible, right?

I'll leave the PR open and let @mdo decide.

[heikojansen]

imho, the utility classes should only do what their name says and have no hidden side effects.
Otherwise it'd be hard to consistently draw a line somewhere for the other utility classes; e.g.: why wouldn't ".pl-1" reset all other padding values then, too?
Following this scheme, adding the 4 utility classes would be ok but I'd reject your existing PR.

[andresgalante]

You guys are right, I've close the PR. Thanks for the feedback.

[mdo]

Negative, we'll leave as-is.

[rediche]

The solution suggested by @morrissey-ingenious no longer works, since rounded-0 was changed in aa5e97da044d774e4d1b5c54234cc8bf1ce862f5 to use !important and is declared after rounded-top, rounded-right, rounded-bottom and rounded-left.

[morrissey-ingenious]

@rediche this is probably best solved by using your own custom classes now