title: overflow: hidden breaks border-radius
body: <p>I am having trouble with a container div, border-radius, and overflow.</p>
  
  <p>(For anyone on hubspot, the following question is how to move the footer content outside of the container div)</p>
  
  <p>NOTE: I am stuck inside a CMS template and cannot change the format or content of the HTML. It must rely solely on CSS</p>
  
  <p>The following is the general layout of the website</p>
  
  <pre><code>    &lt;div id="container"&gt;
         &lt;div id="header"&gt;...&lt;/div&gt;
         &lt;div id="content"&gt;...&lt;/div&gt;
         &lt;div id="footer"&gt;...&lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>the css that is applied is the following:</p>
  
  <pre><code>#container{
     -moz-border-radius: 15px !important;
     -webkit-border-radius: 15px !important;
     -khtml-border-radius: 15px !important;
     border-radius: 15px !important;
     overflow: hidden;
  }
  </code></pre>
  
  <p>if I change the overflow:hidden to overflow:visible the border disappears (at least on Chrome). Does anyone know why this happens and whether there is a way around it?</p>