Question

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-

Answer 1

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.