title: Giving an iframe a border radius
body: <p>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?</p>
  
  <p>html</p>
  
  <pre><code>&lt;div tabindex="0" class="maincontentdiv" style="box-shadow: 5px 5px 5px #999; height:    395px;"&gt;&lt;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;" &gt;&lt;/iframe&gt;
  </code></pre>
  
  Our Cambridge Interior Design Studio<p></p>The Cambridge Design Studio is our hub.
          
  
  <p>css</p>
  
  <pre><code>.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 &gt; .slideup,
  .maincontentdiv:focus &gt; .slideup { 
  min-height: 65%;
  }
  </code></pre>