overflow: hidden breaks border-radius

Question

I am having trouble with a container div, border-radius, and overflow.

(For anyone on hubspot, the following question is how to move the footer content outside of the container div)

NOTE: I am stuck inside a CMS template and cannot change the format or content of the HTML. It must rely solely on CSS

The following is the general layout of the website

    <div id="container">
       <div id="header">...</div>
       <div id="content">...</div>
       <div id="footer">...</div>
    </div>

the css that is applied is the following:

#container{
   -moz-border-radius: 15px !important;
   -webkit-border-radius: 15px !important;
   -khtml-border-radius: 15px !important;
   border-radius: 15px !important;
   overflow: hidden;
}

if I change the overflow:hidden to overflow:visible the border disappears (at least on Chrome). Does anyone know why this happens and whether there is a way around it?

I know why this happens. A solution without overflow:hidden eludes me though — cjds
– cjds, Commented Dec 25, 2012 at 3:54

cjds · Accepted Answer · 2012-12-25 03:53:20Z

1

If your asking for why this happens the answer is simple.

Borders in most browsers work in such a manner. Discover a bounding rectangle. Draw the required radius around the bounding rectangle.

The problem is the browsers draw the border on the edge of the bounding rectangle .

So theoretically elements can break through the bounds of the rectangle when they are rounded.

This is the overflow. So if overflow:visible the edges might not be clean.

Why does overflow:hidden fix this

Well its simple overflow:hidden just hides anything outside the bounds of a bounding rectangle. Hence and therefore this would clean up your border

answered Dec 25, 2012 at 3:53

cjds

8,47611 gold badges57 silver badges86 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

cjds · Accepted Answer · 2012-12-25 03:43:02Z

0

i have been using radius on buttons, and sometimes the !important; crashes the ruleset when used on border radius, then removing !important causes the ruleset to work again...

(found out while tweaking css of some websites)

edited Dec 25, 2012 at 3:43

cjds

8,47611 gold badges57 silver badges86 bronze badges

answered Dec 25, 2012 at 2:56

Rexy Dallas

1

1 Comment

cjds Over a year ago

He never said his ruleset was crashed? The border works but it just has an overflow problem

Collectives™ on Stack Overflow

overflow: hidden breaks border-radius

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related