CODEWITHSUNDEEP
htmliframecss
user3812235
user3812235

Reputation: 37

Giving an iframe a border radius

Below is the html for a div with rounded corners, inside this div is another animated div called slide up, this too has rounded corners. Inside the initial div I have an iframe with a google map. I am having trouble giving this iframe rounded corner. Could somebody explain to me what I am doing wrong?

html

<div tabindex="0" class="maincontentdiv" style="box-shadow: 5px 5px 5px #999; height:    395px;"><iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2445.0941239724475!2d0.12181700000000163!3d52.20533700000002!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47d870de87416503%3A0xe31084dab9bf0ec1!2sThe+Cambridge+Design+Company!5e0!3m2!1sen!2suk!4v1400231375571" width="100%" height="395"     frameborder="0" style="border:0-moz-border-radius: 15px;
border-radius: 15px;" ></iframe>
Our Cambridge Interior Design Studio

The Cambridge Design Studio is our hub.

css

.maincontentdiv {
position: relative;
height: 100px;
width: 100%;
-moz-border-radius: 15px;
border-radius: 15px;
}
.slideup {
position: absolute;
width: 100%;
bottom: -2px;
min-height: 0;
color: #FFF;
transition: min-height 250ms ease-in;
background-color: #666666;
text-align: center;
height:20px;
-moz-border-radius: 15px;
border-radius: 15px;
}
.maincontentdiv:hover > .slideup,
.maincontentdiv:focus > .slideup { 
min-height: 65%;
}

Upvotes: 2

Views: 11295

Answers (4)

Brendan
Brendan

Reputation: 1

There is a much easier way. All you have to do is give it padding. 

.pics{
    background-color: grey;
    margin: 25px;
    padding:0px;
    border-radius: 20px;

}

Above is a chunk of CSS I am using on a webpage I am working on right now.

Upvotes: 0

Michael Dolphin
Michael Dolphin

Reputation: 35

You just need to wrap the iframe in a relative div, which has border-radius set and overflow:hidden

Make this div the width and height you would like your iframe to be, then make your iframe width:100% and height 100%

Example:

<style>
    .mapwrapper {
      position: relative;
      width: 450px;
      height: 450px;
      border-radius: 50%;
      overflow: hidden;
      margin: 50px auto 50px auto;
    }

    .googlemap {
      width: 100%;
      height: 100%;
    }
</style>   

 <div class="mapwrapper">
        <iframe class="googlemap" src="#" frameborder="0" allowfullscreen></iframe>
 </div>

Working jsfiddle example: https://jsfiddle.net/MichaelDolphin/0n2phL8d/

Upvotes: 1

Sjors van Dongen
Sjors van Dongen

Reputation: 490

Try giving your .maincontentdiv an overflow: hidden;. Also make sure you reindent your code and try not to use inline CSS, it gives you more overview in your code.

.maincontentdiv {
  position: relative;
  height: 100px;
  width: 100%;
  -moz-border-radius: 15px;
  border-radius: 15px;
  overflow: hidden;
}
.slideup {
  position: absolute;
  width: 100%;
  bottom: -2px;
  min-height: 0;
  color: #FFF;
  transition: min-height 250ms ease-in;
  background-color: #666666;
  text-align: center;
  height: 20px;
  -moz-border-radius: 15px;
  border-radius: 15px;
}
.maincontentdiv:hover > .slideup,
.maincontentdiv:focus > .slideup {
  min-height: 65%;
}
<div tabindex="0" class="maincontentdiv" style="box-shadow: 5px 5px 5px #999; height:    395px;">
  <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2445.0941239724475!2d0.12181700000000163!3d52.20533700000002!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47d870de87416503%3A0xe31084dab9bf0ec1!2sThe+Cambridge+Design+Company!5e0!3m2!1sen!2suk!4v1400231375571"
  width="100%" height="395" frameborder="0" style="border:0-moz-border-radius: 15px;
border-radius: 15px;"></iframe>
</div>

Check out the result.

Upvotes: 3

Suresh Ponnukalai
Suresh Ponnukalai

Reputation: 13988

Most likely the problem is a child element with opaque background which will clip the inner radius of the border. To fix this you can apply overflow:hidden.

Udpate your maincontentdiv like below.

.maincontentdiv {
position: relative;
height: 100px;
width: 100%;
-moz-border-radius: 15px;
border-radius: 15px;
overflow:hidden;
}

DEMO

Upvotes: 3

Related Questions