Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Have border-radius cover inner divs

Tags:

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?

like image 481
Brandon Wang Avatar asked Aug 14 '09 21:08

Brandon Wang


People also ask

How do you set the inner border radius in CSS?

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.

Why border radius is not working on div?

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.

Can CSS outline have a radius?

The outline-radius property is used to specify the radius of an outline. It is used to give rounded corners to outlines.

Can you use REM for border radius?

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.


1 Answers

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

like image 157
blu42media Avatar answered Sep 17 '22 15:09

blu42media