Question

I have an iframe inside a div tag with Overflow:Hidden and a Border-Radius of 50px all around making it a circle. The iframe source is an .aspx page with a button. When the button is clicked it causes post back. On post back I have it change background color from nothing to something.

iframeBody.Attributes.Add("Style", "background-color:#FF9090");

It works perfectly in Firefox and Internet Explorer (Fine in IE!? Surprising!) But in Chrome it seems to overflow the background color forming a square. (All other content displays perfectly, it’s just the background seeping out.) Any help would be appreciated. Thanks.

Answer 1

The square you’re seeing in your sample is the iframe border. You can easily remove that with styles:

iframe {
    border: 0;
}

The content of the iframe apparently overflows the containing div, when the div has position: absolute (or relative, for that matter). I’m not quite sure why that would be the case, but you could always work around that by wrapping that div in a container that contains only the div and the iframe, and move the positioning to that element:

<div id="outer">
    <div>
        <iframe></iframe>
    </div>
</div>

#outer {
    position: absolute;
    width: 100px;
    height: 100px;
}

#outer > div {
    border-radius: 50px;
    height: 100px;
    width: 100px;
    overflow: hidden;
    border: 5px solid #D3D3D3;
}

iframe {
    border: 0;
    background-color: pink;
    height: 100%;
    overflow: hidden;
    width: 100%;
}

Having taken care of this, you’ll notice that the iframe overlaps part of the border. This is the same behaviour you’d see in chrome if you were to just remove the position: absolute.

Now that you do have a wrapper, however, it is a small fix to also move the border to that wrapper, which will take care of that problem as well, and give you a nice circle border, that’ll look the same across all modern browsers.

Note that you want to keep the border-radius property on both divs, but move the border property to #outer. Now, since the wrapper has a border, and its child does not, the wrapper will be slightly larger, so for a smooth circle, it’ll also need a slightly greater border radius:

#outer {
    position: absolute;
    width: 100px;
    height: 100px;
    border: 5px solid #D3D3D3;
    border-radius: 55px;
}

#outer > div {
    border-radius: 50px;
    height: 100px;
    width: 100px;
    overflow: hidden;
}

iframe {
    border: 0;
    background-color: pink;
    height: 100%;
    overflow: hidden;
    width: 100%;
}

Working demo