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

Created by: 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?