20

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?

sren
  • 3,513
  • 4
  • 25
  • 28

5 Answers5

22

The div container method described in How to Get Rounded Corners on an iFrame using Border-Radius CSS works for me.

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

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.

martin clayton
  • 76,436
  • 32
  • 213
  • 198
Paul Hiles
  • 9,558
  • 7
  • 51
  • 76
  • 1
    @Ryan In Chrome you can just apply `border-radius: 10px` directly to the iframe. – feklee Aug 17 '13 at 08:06
  • 1
    @feklee as of the current version (28.0.1500.95) an iframe scroll bar will still remain square and will not be rounded. Wrapping it in a div with overflow hidden doesn't work either. The scroll bar will appear to overflow the container. Firefox and IE work fine. – Ryan Aug 19 '13 at 13:32
3

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;
}
<div class="circle">
  <iframe width="640" height="480" src="https://www.youtube.com/embed/_8CP1tT8tdk" frameborder="0" allowfullscreen></iframe>
</div>
ESP32
  • 8,089
  • 2
  • 40
  • 61
Samshel
  • 928
  • 8
  • 12
2

Wrapping the <iframe> in a <div> should work.

#wrap {
  width: 320px;
  height: 320px;
  -moz-border-radius: 10px;
  background: red;
  position: relative;
}
iframe {
  width: 300px;
  height: 300px;
  position: absolute;
  top: 10px;
  left: 10px;
}
<div id="wrap">
  <iframe src="http://google.com" />
</div>

I have attached a jsfiddle to demonstrate: http://jsfiddle.net/fxPsC/

showdev
  • 28,454
  • 37
  • 55
  • 73
jeffreynolte
  • 3,749
  • 11
  • 41
  • 64
  • Thanks, almost what I was wanting, but I rather wanted the actual iframe to have rounded corners - no borders. It doesn't seem possible. – sren Apr 27 '11 at 06:20
  • 1
    SimonRentzke is right. I even tried with `overflow:hidden`, but it clips to a square. – Alba Mendez Oct 17 '11 at 16:59
  • You may want to also include `border-radius:10px`, without the "-moz" prefix. – showdev Jul 31 '15 at 17:02
0

You can also add it to the iframe tag if your tag has inline style: 

    <iframe 
    width=\"100%\" height=\"100%\"
    frameborder=\"0\" style=\"border:0;border-radius: 25px\";
    src=". $locationlink ." allowfullscreen>
    </iframe>
Ryan Jarvis
  • 61
  • 9
-1

Try adding this to your CSS:

iframe {
    border-radius: 10px;
}
Robert Siemer
  • 32,405
  • 11
  • 84
  • 94
Dawg
  • 21
  • 2