Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS adding border radius to an IFrame

Tags:

css

border

iframe

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:

IFrame content overlapping with CSS border

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

like image 995
JHollanti Avatar asked Jun 30 '11 13:06

JHollanti


People also ask

How do you change the radius of an iframe border?

All you need to do is put your iFrame into a DIV, and set the DIV's and iframe's position to absolute. Then set your z-index in CSS. It works great with Youtube videos in bubbles! z-index is crucial here, with only overflow hidden - frame was sometimes popping with corner - when frame content was changing.

How do you put a radius on a border in CSS?

CSS Syntaxborder-radius: 1-4 length|% / 1-4 length|%|initial|inherit; Note: The four values for each radius are given in the order top-left, top-right, bottom-right, bottom-left. If bottom-left is omitted it is the same as top-right. If bottom-right is omitted it is the same as top-left.

Can I CSS an iframe?

We can use inline CSS for the iframe by using CSS inside the iframe tag. Example: The design of the HTML page is implemented as follows. to an iframe? Example: In the following example, the iframe size is of “300px” for both width and height and the border thickness is “3px” and dotted style.


2 Answers

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>
like image 182
Stefan Rein Avatar answered Oct 20 '22 04:10

Stefan Rein


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)

like image 27
Plippie Avatar answered Oct 20 '22 04:10

Plippie