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?