Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 42 down vote favorite
15

I need round corners on a parent div to mask content from its childen. "overflow: hidden" works in simple situations, but breaks in webkit based browsers and Opera when the parent is positioned relatively or absolutely.

This works in Firefox and IE9:

CSS

#wrapper {
    width: 300px; height: 300px;
    border-radius: 100px;
    overflow: hidden;
    position: absolute;
}

#box {
    width: 300px; height: 300px;
    background-color: #cde;
}

HTML

<div id="wrapper">
    <div id="box"></div>
</div>

Example on JSFiddle

Thanks for the help!

share|improve this question

4 Answers

up vote 33 down vote accepted

Nevermind everyone, I managed to solve the problem by adding an additional div between the wrapper and box.

CSS

#wrapper {
    position: absolute;
}

#middle {
    border-radius: 100px;
    overflow: hidden; 
}

#box {
    width: 300px; height: 300px;
    background-color: #cde;
}

HTML

<div id="wrapper">
    <div id="middle">
        <div id="box"></div>
    </div>
</div>

Thanks everyone who helped!

→ http://jsfiddle.net/5fwjp/

share|improve this answer
10  
This works because positioned elements don't clip their contents to their border-radius in Webkit. This extra layer simply makes it so the div with border-radius is NOT positioned, and simply sits inside a positioned element. – Daniel Beardsley Jun 21 '11 at 0:28
9  
Would you by chance know if this is a bug/intended behavior? – jmotes Jun 21 '11 at 19:01
3  
+1 vote to bug... When you have an image gallery which automatically generates the divs and sets the position to absolute, then this "feature" really sux... – inf3rno Aug 31 '12 at 14:19
up vote 4 down vote

Not an answer, but this is a filed bug under the Chromium source: http://code.google.com/p/chromium/issues/detail?id=62363

Unfortunately, doesn't look like there's anyone working on it. :(

share|improve this answer
up vote 30 down vote

I found another solution for this problem. This looks like another bug in WebKit (or probably Chrome), but it works. All you need to do - is to add a WebKit CSS Mask to the #wrapper element. You can use a single pixel png image and even include it to the CSS to save a HTTP request. Unfortunately this works in Google Chrome but not in Safari.

#wrapper {
width: 300px; height: 300px;
border-radius: 100px;
overflow: hidden;
position: absolute; /* this breaks the overflow:hidden in Chrome/Opera */

/* this fixes the overflow:hidden in Chrome */
-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
}

#box {
width: 300px; height: 300px;
background-color: #cde;
}​

JSFiddle Example

share|improve this answer
was having this problem. Thanks for the fix, appreciated – Nasir Jul 2 '12 at 14:32
3  
thank you for this fix. tried it out in safari today (v6.0.2) and worked for me there! – billythetalented Nov 22 '12 at 13:29
Also works for me in Safari 6.0.2 – eveevans Jan 4 at 18:02
this will break any shadows on the element however. – Jack Jan 25 at 17:34
fixed my overflow problem in Chrome 24.0.1312.57, thanks! – xorinzor Feb 1 at 18:48
show 1 more comment
up vote 0 down vote

Here look at how I done it; Jsfiddle

With the Code I put in, I managed to get it working on Webkit (Chrome/Safari) and Firefox. I don't know if it works with the latest version of Opera. Yes it does work under the latest version of Opera.

#wrapper {
  width: 300px; height: 300px;
  border-radius: 100px;
  overflow: hidden;
  position: absolute; /* this breaks the overflow:hidden in Chrome/Opera */
}

#box {
  width: 300px; height: 300px;
  background-color: #cde;
  border-radius: 100px;
  -webkit-border-radius: 100px;
  -moz-border-radius: 100px;
  -o-border-radius: 100px;
}
share|improve this answer
Why bother putting the border-radius on wrapper at all in that situation, you get the same result with just setting it on #box. Also, if the #box border radius is only to fix WebKit you could just include the -webkit- property there. – robertc Apr 21 '11 at 12:25
Maze, this might work in some situations, but in my case I'm looking for a solution that doesn't transform the shape of the box (and the wrapper still works as a mask). My example was very simplified but I'm trying to use the wrapper to hide dropshadow from the box (using padding on the wrapper to make only the shadow edges I want visible). – jmotes Apr 21 '11 at 14:42
1  
Thanks for the help though Maze! Your solution helped me think about the problem more critically. Btw, you can ignore the edit I made to your post. I meant to make it to my own. Sorry :) – jmotes Apr 21 '11 at 15:09
@user480837 No Problem mate, glad that I have been of help. :) – Maze Apr 21 '11 at 16:19
@Maze That won't work if a border of any sort is applied: jsfiddle.net/ptW85/228 – antitoxic Apr 12 '12 at 10:57

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.