23

Rounded corners fail to cut off content in webkit browsers (e.g. Chrome) if position:relative;

See this demo.

HTML:

<div class="outer">
    <div class="inner">
    </div>
<div>

CSS:

.outer {
    background:yellow;
    border:solid 1px black;
    position:relative;/* Setting this means rounded corners don't cut off content! */
    overflow:hidden;

    -moz-border-radius: 12px;
    border-radius: 12px;   
}
.inner {
    background:red;
    height:50px;
}

Anyone know of a fix? Thanks-

Yarin
  • 173,523
  • 149
  • 402
  • 512

9 Answers9

8

You can force it to render in 3d with: 

-webkit-transform: translateZ(0);   
-moz-transform: translateZ(0);   
transform: translateZ(0);
drs
  • 5,679
  • 4
  • 42
  • 67
KIm
  • 81
  • 1
  • 1
8

span.outer{
    position:relative;
}

div.outer {
    background:yellow;
    border:solid 1px black;    
    overflow:hidden;    
    -moz-border-radius: 12px;
    border-radius: 12px;   
}

.inner {
    background:red;
    height:50px;
}
<span class="outer">
    <div class="outer">
        <div class="inner">
        </div>
    </div>
</span>

Original JSFiddle: http://jsfiddle.net/USd5s/

Hate to add extra dom elements but a simple wrapper fixes this right up. You don't have to use my choice of element or css method either, span and qualified css is just my taste. <div class="wrap> or something would work just as well.

Shea Hunter Belsky
  • 2,815
  • 3
  • 22
  • 31
Fresheyeball
  • 29,567
  • 20
  • 102
  • 164
  • This works, however as indicated this is merely a hack for a webkit bug. Further testing shows that while performing CSS transitions on the elements beneath, this technique will fail. Only after the transition completes does the overflow:hidden work properly again. – Joshua Jun 19 '12 at 17:05
  • @Joshua can you put that in a fiddle for me? – Fresheyeball Jun 19 '12 at 18:09
4

Simply set the inner to the same border radius as the outer.

.inner {
    -moz-border-radius: inherit;
    -webkit-border-radius: inherit;
    border-radius: inherit;
}

Oh, and don't forget the webkit peoples. :]

k4t434sis
  • 519
  • 4
  • 17
1

I had the same issue in a project and solve it with a little change in the CSS

instead of setting position to relative I set it to inherit:

.outer {
    background:yellow;
    border: solid 1px black;
    position: inherit;
    overflow:hidden;
    border-radius: 12px;   
}

And that solved perfectly the problem.

Pierre
  • 18,643
  • 4
  • 41
  • 62
Federico
  • 19
  • 2
0

You can give the inner div the same border-radius: http://jsfiddle.net/eCsA3/8/

<div class="outer">
    <div class="inner">
    </div>
<div>

<style type="text/css">
.outer {
    background:yellow;
    border:solid 1px black;
    position:relative;/* Setting this means rounded corners don't cut off content! */
    overflow:hidden;

    -moz-border-radius: 12px;
    border-radius: 12px;   
}
.inner {
    background:red;
    height:50px;
    -moz-border-radius: 12px;
    border-radius: 12px;   
}
</style>
Flauwekeul
  • 869
  • 7
  • 24
  • 1
    @Flauwekeul- This would work in this simple example but does not solve the problem for when the outer div would have more complex content that did not necessarily sit flush at the corners. – Yarin May 27 '11 at 13:08
0

I believe that I read somewhere that you have to clip the container to something in order to solve this problem. I'm not really sure, but I think that's the way to go.

Vasseurth
  • 6,354
  • 12
  • 53
  • 81
-1

Please see this link. This solves your problem. 

#wrapper {
    margin-top:250px;
    width: 300px; 
    height: 300px;
    border-radius: 100px;
    overflow: hidden;
    position: absolute; /* this breaks the overflow:hidden in Chrome/Opera */
    -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC); /* this fixes the overflow:hidden in Chrome/Opera */
}
Rem
  • 67
  • 1
  • 6
-1

As Paul Said, Bug in webkit, But you can still get around it using margins on inner div.

defau1t
  • 10,593
  • 2
  • 35
  • 47
-1

Try this as the CSS for .inner:

.inner {
    background: red;
    height: 50px;
    position: absolute;
    top: 1px;
    left: 12px;
    right: 12px;
    bottom: 1px;
}

You will need to tweak bottom and top to get the height right. If left unchanged, the class will only have a height of one pixel. This method will set the left and right margins to the border radius, so nothing appears on the edges.

Alternatively, if you have a solid color background around .outer you could make an image like this: Rounded Corner PNG where the area inside (the checkered area in the image) is transparent and the area outside is the background color. Then use border image or absolute positioning to place it where the corners are. Give it a high z-index. When you scroll, the contents will be hidden underneath the filled part of the corner.

D K
  • 5,530
  • 7
  • 31
  • 45
  • I put your solution in [the JSFiddle](http://jsfiddle.net/eCsA3/113/) and it does not work at all. In Safari, it collapses the entire div into a horizontal line. – Sparky Aug 02 '11 at 16:27
  • That's why you should add `bottom` as a property (as I said). I'll update my answer to make it clearer. – D K Aug 04 '11 at 20:01