Adding Border Radius to iFrame

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.


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


<div class="parent_container"> 


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

Leave a Reply

Posted in CSS
katherine as a flat graphic icon

About Me

I’m an African / Ojibwe First Nations Web Developer living in Winnipeg, Manitoba.

Visit the Tips and Blog to see what I’m working on.