Giving an iframe a border radius

Question

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%;
}

Answer 1

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.