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

Question

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?

Answer 1

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>

Answer 2

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/

Answer 3

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>

Answer 4

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.

Answer 5

Try adding this to your CSS:

iframe {
    border-radius: 10px;
}