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 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.

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/