CSS Adding Border Radius to an Iframe

CSS adding border radius to an IFrame

Border radius isn't well supported or consistent yet. If you want the desired affect, try using DIV's around the element and use graphics instead, with an overflow of hidden in your CSS. You might want to look into the sliding doors tehnique if your iframe varies in height.

http://www.alistapart.com/articles/slidingdoors/

Hope this helps.

Good luck!

Giving an iframe a border radius

Try giving your .maincontentdiv an overflow: hidden;.
Also make sure you reindent your code and try not to use inline CSS, it gives you more overview in your code.

.maincontentdiv {  position: relative;  height: 100px;  width: 100%;  -moz-border-radius: 15px;  border-radius: 15px;  overflow: hidden;}.slideup {  position: absolute;  width: 100%;  bottom: -2px;  min-height: 0;  color: #FFF;  transition: min-height 250ms ease-in;  background-color: #666666;  text-align: center;  height: 20px;  -moz-border-radius: 15px;  border-radius: 15px;}.maincontentdiv:hover > .slideup,.maincontentdiv:focus > .slideup {  min-height: 65%;}

<div tabindex="0" class="maincontentdiv" style="box-shadow: 5px 5px 5px #999; height:    395px;">  <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2445.0941239724475!2d0.12181700000000163!3d52.20533700000002!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47d870de87416503%3A0xe31084dab9bf0ec1!2sThe+Cambridge+Design+Company!5e0!3m2!1sen!2suk!4v1400231375571"  width="100%" height="395" frameborder="0" style="border:0-moz-border-radius: 15px;border-radius: 15px;"></iframe></div>

Is it possible to have CSS rounded corners on an iframe?

The div container method described in How to Get Rounded Corners on an iFrame using Border-Radius CSS works for me.

And to do this you simply wrap the iFrame in div tags and give the div these css properties:

<div style="border-radius: 10px; width: 300px; overflow: hidden;">

The border-radius should be set to whatever you want the roundness to be, and the width must be set to the width of the iFrame, else you will get only a few (if any) rounded corners. But the most important thing is the overflow: hidden, as this hides the iFrames real corners.

create border radius iframe plugin

The left two round corners appears after resized is because of you resized the browser to a certain size, as you set the width of iframe to 100%, and it's parent container div#widget is a block element, so the iframe's width is always as same as it's parent DIV, and in your embedded page, the main content width is just about 340px, the left is blank (white background), so the top-right & bottom-right corder becomes invisible when div#widget width is over 363px ( main content width 340px + border radius 23px). So you should restrict the width of iframe or div#widget:

#widget {   width: 340px;}iframe, #wbf{    border-radius: 23px;}

 <div class="col-md-4" id="widget">
 <iframe id="wbf" src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2FCl%25C3%25ADnica-Materno-Infantil-Casa-Del-Ni%25C3%25B1o-SA-399571326824453%2F&tabs=timeline&width=340&height=500&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId" width="100%" height="393" style="border:none;overflow:hidden;padding-top:0.5%" scrolling="no" frameborder="0" allowTransparency="true"></iframe>

 </div>

Rounded corners for an iframe not working in Safari

What exactly doesn't work? I have tested it in Safari but it seems to be working.

<div class="modal-iframe-wrapper">
 <iframe class="modal-iframe" src="https://example.com"></iframe>
</div>

.modal-iframe-wrapper {
 overflow: hidden;
 border-radius: 8px;
 width: 400px;
 height: 400px;
 background: red;
}
iframe { widith: 100%; height: 100%; border: 0; }

https://jsfiddle.net/jwb546k6/

iFrame border-radius displays visual gaps

Have you tried .mapFrame iframe {border: none}? From my computer (also latest chrome), it appears to be the default iframe border. You might also consider making the iframe display:block as inline elements tend to have line height and letter spacing that throws off pixel exact rendering.

CSS border-radius on iFrame embedding google maps, not working

It does work, you need to use overflow: hidden; for the span element as your iframe overflows out of the span element, and since you don't have border-radius applied on the iframe, it renders as a rectangle block...

#moreInfo {
    position: absolute;
    opacity: 0;
    top: 0px;
    left: 10px;
    width: 300px;
    height: 200px;
    background-color: blue;
    border-radius: 50%;
    overflow: hidden;
}

Demo

---

If you don't want to use overflow: hidden; for the parent, than use the border-radius for the iframe as well... and get rid of blue background color...

#moreInfo iframe {
    border-radius: 50%;
}

Demo 2 (As you commented, fails on Chrome, will look into it soon)

---

Related Topics