WE'RE WEB DEVELOPERS IN CAPE TOWN, SOUTH AFRICA

From the Blog

May
11

How to Get Rounded Corners on an iFrame using Border-Radius CSS

Posted by robventer on May 11th, 2012 at 2:21 pm

If you are in a situation where you have an iFrame that you would like to have rounded corners on, but you can’t control the css of this iFrame, there is a simple solution using a div.

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;”> <iframe></iframe> </div>

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.

The idea behind it is that the div acts as a sort of frame around the iFrame, and that this frame cuts off the sharp corners.

Its as simple as that.

Don’t forget to follow us on twitter. And please comment to let us know what you think of this trick or if you have a question.

Leave a Reply

  1.  

    |