I have a Coda slider on one webpage (hand-crafted, not using the plugin, but that's irrelevant) and the outer div has a border-radius.
A bunch of inner divs have background colors, but they stick out on top of the corners when I want them to be BEHIND the rounded corner.
Is there any way to achieve this?
CSS Syntaxborder-radius: 1-4 length|% / 1-4 length|%|initial|inherit; Note: The four values for each radius are given in the order top-left, top-right, bottom-right, bottom-left. If bottom-left is omitted it is the same as top-right. If bottom-right is omitted it is the same as top-left.
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.
The outline-radius property is used to specify the radius of an outline. It is used to give rounded corners to outlines.
The border-radius property can accept any valid CSS length unit. That means everything from px , rem , em , ch , vh , vw , and a whole bunch more are fair play.
If you apply position:static to the element with overflow:hidden you will achieve the results you are looking for.
Check this out: overflow:hidden, border-radius and position:absolute
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