Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Flexbox curved corners

Tags:

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

like image 690
Ezz Avatar asked Nov 27 '14 18:11

Ezz


People also ask

Why border radius is not working?

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.

How do you create a smooth border radius?

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.


1 Answers

You just need to add overflow:hidden; to the parent element with the border-radius property.

like image 182
web-tiki Avatar answered Sep 26 '22 10:09

web-tiki