I've looked around, and as far as I can see it's not possible, but say you're embedding a YouTube iframe, is it possible to round those corners using CSS?
5 Answers
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 thewidth
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.
-
1@Ryan In Chrome you can just apply
border-radius: 10px
directly to the iframe.– fekleeAug 17, 2013 at 8:06 -
1@feklee as of the current version (28.0.1500.95) an iframe scroll bar will still remain square and will not be rounded. Wrapping it in a div with overflow hidden doesn't work either. The scroll bar will appear to overflow the container. Firefox and IE work fine.– RyanAug 19, 2013 at 13:32
The way to go is wrapping the iframe in a circular div as other users suggested. The only difference being that you have to add an additional style position:relative
to the wrapper for it to work in Chrome browser.
So the code would go like this:
.circle {
width: 320px;
height: 320px;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
overflow:hidden;
position:relative;
}
<div class="circle">
<iframe width="640" height="480" src="https://www.youtube.com/embed/_8CP1tT8tdk" frameborder="0" allowfullscreen></iframe>
</div>
Wrapping the <iframe>
in a <div>
should work.
#wrap {
width: 320px;
height: 320px;
-moz-border-radius: 10px;
background: red;
position: relative;
}
iframe {
width: 300px;
height: 300px;
position: absolute;
top: 10px;
left: 10px;
}
<div id="wrap">
<iframe src="http://google.com" />
</div>
I have attached a jsfiddle to demonstrate: http://jsfiddle.net/fxPsC/
-
Thanks, almost what I was wanting, but I rather wanted the actual iframe to have rounded corners - no borders. It doesn't seem possible.– srenApr 27, 2011 at 6:20
-
1SimonRentzke is right. I even tried with
overflow:hidden
, but it clips to a square. Oct 17, 2011 at 16:59 -
You may want to also include
border-radius:10px
, without the "-moz" prefix.– showdevJul 31, 2015 at 17:02
You can also add it to the iframe tag if your tag has inline style:
<iframe
width=\"100%\" height=\"100%\"
frameborder=\"0\" style=\"border:0;border-radius: 25px\";
src=". $locationlink ." allowfullscreen>
</iframe>