Bootstrap's .border-radius()
mixin is no longer there in version 3.
I am working on converting my codebase and thought of this omission as rather strange. Has .border-radius
been replaced by some other mixin? Is its use discouraged, and if so why?
If there are contents within the div that has the curved corners, you have to set overflow: hidden because otherwise the child div's overflow can give the impression that the border-radius isn't working. This answer worked for me.
Just go to http://getbootstrap.com/customize/ Find all "radius" and modify them as you wish. Click "Compile and Download" and enjoy your own version of Bootstrap.
You can just add the same rule border-radius: 20% to the card element.
With the CSS border-radius property, you can give any element "rounded corners".
Aha! I have located the answer...
Remove
.border-radius()
and.border-*-*-radius mixins
. As only Android 2.1, iOS 3.2, and older desktop browsers require a prefixed version, we've removed the base mixin. Since we no longer require prefixes for independent corners, we've dropped those mixins as well. Mixins for a single side, like.border-left-radius
, are still available.
From TWBS Pull 6342, specifically under LESS changes.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With