CSS adding border radius to an IFrame

Question

Adding a border to an IFrame is no biggie - you do it like this e.g.:

  border: 4px solid #000;
  -moz-border-radius: 15px;
  border-radius: 15px;

The problem is that when you load content to that IFrame, the content overlaps the borders in the corners, like so:

Any ideas how one might get past this issue? E.g. is there a JavaScript library that would take care of this...

Answer 1

In case you haven't figured this out yet, try this...works for me:

I have noticed that if you try to do this externall even to the tag, it doesn't work. Set style within the iframe tag.

Good Luck!

Answer 2

You can also do it like this:

<div style="padding:10px;background:#000;webkit-border-radius: 20px;-moz-border-radius: 20px;border-radius: 20px;width:560px;margin:0 auto;overflow:hidden;">
    <iframe src="http://www.youtube.com/embed/MOVIEID?fs=1&autoplay=1&loop=1&rel=0&border=0&modestbranding=1" width="560" height="315" frameborder="0"></iframe>
</div>

I have also included all the youtube options in the above example:

1: autoplay=1 (0/1 | automatic play movie)

2: loop=1 ( 0/1 looping on/off )

3: rel=0 ( hide related movies after movie ending, this does not always work)

4: border=0 (removes youtube border)

5: modestbranding=1 (removes youtube logo)

Answer 3

Use this property:

border: 4px solid #000;
-moz-border-radius: 15px;
border-radius: 15px;
overflow: hidden;

Answer 4

You miss overflow and position properties. This should work:

    border: 4px solid #000;
    -moz-border-radius: 15px;
    border-radius: 15px;
    overflow: hidden;
    position: relative;

Answer 5

Border radius isn't well supported or consistent yet. If you want the desired affect, try using DIV's around the element and use graphics instead, with an overflow of hidden in your CSS. You might want to look into the sliding doors tehnique if your iframe varies in height.

http://www.alistapart.com/articles/slidingdoors/

Hope this helps.

Good luck!

Answer 6

Put the iframe in a wrapper element and give the wrapping element this CSS property:

transform: translateY(0px);

.corner-wrapper {
  display: block;
  overflow: hidden;
  width: 300px;
  height: 150px;
  border-radius: 10px;
  transform: translateZ(0px);
  border: 3px solid #eee;
}

<div class="corner-wrapper">
    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d77935.71780117304!2d9.691260439866745!3d52.37964560033004!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47b00b514d494f85%3A0x425ac6d94ac4720!2sHannover!5e0!3m2!1sde!2sde!4v1458445807305" width="300" height="150" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>