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-

6

9 Answers 9

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.

2
  • 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, 2012 at 17:05
  • @Joshua can you put that in a fiddle for me? Jun 19, 2012 at 18:09
8

You can force it to render in 3d with:

-webkit-transform: translateZ(0);   
-moz-transform: translateZ(0);   
transform: translateZ(0);    
0
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. :]

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.

1
  • Not a solution- inherit will just use whatever position the parent element has
    – Yarin
    Jan 20, 2013 at 1:57
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.

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>
1
  • 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, 2011 at 13:08
-1

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

-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.

2
  • I put your solution in the JSFiddle and it does not work at all. In Safari, it collapses the entire div into a horizontal line.
    – Sparky
    Aug 2, 2011 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 4, 2011 at 20:01
-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 */
}

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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