Adding Border Radius to iFrame

September 18, 2014

IFrames can be difficult to customize.  If you want to add a border, or a box shadow to them, it can be simpler to do so if you wrap them in a parent div, and apply the necessary changes to this container.  Border-radius will work with a parent div, when you couple it with overflow: hidden; forcing the clipping of the contained elements, and giving the illusion of the effect you’re looking for.

CSS:

.parent_container { 	
	position: relative; 	
	overflow: hidden; 	
	border-radius: 10px; 	
	-moz-border-radius: 10px; 	
	-webkit-border-radius: 10px; 
}

HTML:

<div class="parent_container"> 
	<iframe></iframe> 
</div>

Reference of this usage can be found here and here is an example of this code in use.