Is it possible to have the contents of a flexbox adapt to it's border radius.
For example:
If we have a flexbox with border-radius: 10px
when we reorder the elements inside the box is it possible to have the resulting corner elements have the same respective border-radius.
ex: The top right element will have border-top-right-radius: 10px
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.
Simply split the colors between different elements — the outer element has the border and the specified border-radius, while the inner element has the background-color and a slightly smaller border-radius.
You just need to add overflow:hidden;
to the parent element with the border-radius property.
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