title: CSS rounded corners in IE8
body: <p>I'm having issues with rounded corners in IE8. I've tried a few methods without success.</p>
  
  <p>Here is my code: </p>
  
  <pre><code>&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
  &lt;title&gt;Untitled Page&lt;/title&gt;
  
  &lt;style&gt;
  body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.8em;
    padding: 2px;
    margin: 2px;
    color: #505050;
    line-height: normal;
  }
  p {
    margin: 4px;
  }
  .categoryheading3 {
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    background-color: #297BB6;
    color: #FFFFFF;
    font-size: 16px;
    font-weight: 700;
    padding: 8px 0;
    text-align: center;
    margin: 0px;
  }
  .leftcolumn {
    width: 174px;
    padding: 8px;
    float: left;
    display: inline-block;
    background-color: transparent;
    /*--min-height: 500px*/
    overflow: hidden;
  }
  .lefttop {
    display: inline-block;
    width: inherit;
    margin: 0 5px 2em 0;
    float: left;
    width: 160px;
    background-color: #FFFFFF;
    border: 2px solid #297BB6;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
  }
  &lt;/style&gt;
  
  
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;div class="leftcolumn"&gt;
    &lt;div class="lefttop"&gt;
      &lt;H4 class="categoryheading3"&gt;Heading&lt;/H4&gt;
      &lt;p&gt;sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text &lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Which produces this in Firefox:</p>
  
  <p><img src="https://i.stack.imgur.com/QrsPO.jpg" alt="firefox example"></p>
  
  <p>But this in IE8:</p>
  
  <p><img src="https://i.stack.imgur.com/XzuCX.jpg" alt="IE8 makes me sad"></p>
  
  <p>If anyone has any tips I'd be very grateful! </p>
  
  <p>edit: Joseph helped by suggesting to use pie.htc, however I'm still struggling with this element not working:</p>
  
  <pre><code>.categoryheading3 {
    -moz-border-radius: 5px 5px 0 0;
    -webkit-border-radius: 5px 5px 0 0;
    behavior: url(PIE.htc);
    background-color: #297BB6;
    color: #FFFFFF;
    font-size: 16px;
    font-weight: 700;
    padding: 8px 0;
    text-align: center;
    margin: 0px;
  }
  </code></pre>