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

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;
}