Is it possible to have CSS rounded corners on an iframe?
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>
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.
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/