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

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?

[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]

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