Member Avatar for karlcunanan

IE once again proved its incompetency against other web browsers, is there no other way to round the corners of the table if putting a background color as its header except usign an image? These are my codes:

CSS

.table1
{
    -moz-box-shadow: 1px 0 5px #888;
    -webkit-box-shadow: 1px 0 5px #888;
    box-shadow: 1px 0 5px #888;
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    text-align:justify;
    margin: 1em auto;
    padding: 0;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    overflow: hidden;
    border: 1px thin;
    border-collapse: separate;

}
.color
{
    background-color:#66F;
}

HTML

<table class="table1" style="margin-left:18px"align="left" width="400" border="0">
  <tr>
    <td class="color" height="25">
</td>
  </tr>
  <tr>
    <td style="padding-left:20px; padding-right:20px; margin-top:20px" height="285"><span style="font-weight:bold; font-size:16px">Some text</span> Some text<br /><br />
     <span style="font-weight:bold; font-size:16px">Some text</span> Some text</td>
  </tr>
</table>
  • 3 Contributors
  • 3 Replies
  • 3K Views
  • 8 Hours Discussion Span
  • Latest Post Latest Post by AleMonteiro

Dani AI

Generated

is right that IE9 can render rounded corners, but only in IE9 Standards mode. If the page falls into Quirks/Compatibility View, CSS3 features like border-radius may not apply as expected, so be sure the HTML5 doctype is first and no X-UA-Compatible/header forces an older mode. Also, as noted, IE8 and earlier do not support border-radius at all without a workaround. (learn.microsoft.com, developer.mozilla.org)

What bites here is table painting. border-radius is ignored when a table uses border-collapse: collapse. Even with separated borders, IE can let a cell’s background show past the table’s curved edge. Two reliable patterns:

  1. Clip with a wrapper (works across modern browsers, including IE9+):
<div class="table-card">
  <table class="table1">
    <thead><tr><th>Header</th></tr></thead>
    <tbody><tr><td>Some text</td></tr></tbody>
  </table>
</div>
.table-card { border-radius: 6px; overflow: hidden; box-shadow: 1px 0 5px #888; }
.table1 { border-collapse: separate; border-spacing: 0; width: 400px; }
.table1 thead th { background: #66f; color: #fff; }

This avoids relying on the table to do the clipping; the wrapper does it. Note the separate model plus border-spacing: 0. (developer.mozilla.org)

  1. Round the header cells directly (no wrapper needed):
.table1 { border-collapse: separate; border-spacing: 0; }
.table1 thead th:first-child { border-top-left-radius: 6px; }
.table1 thead th:last-child  { border-top-right-radius: 6px; }
.table1 tfoot td:first-child { border-bottom-left-radius: 6px; }
.table1 tfoot td:last-child  { border-bottom-right-radius: 6px; }

Both approaches keep the colored header from squaring off the corners. For IE8-and-below audiences, you will need to accept square corners, use images, or add a polyfill; there is no native support in those versions. (developer.mozilla.org)

Recommended Answers

All 3 Replies

Member Avatar for AleMonteiro

I just tested and it seems to work fine in IE 9.

With one detail: you must set the doctype to HTML 5

<!DOCTYPE html>
Member Avatar for JorgeM

Yes, the code above does produce rounded corners in IE9, but not earlier versions of IE.

Member Avatar for AleMonteiro

JorgeM,

corner-radius is a CSS 3 feature. It'll not work on earlier versions of any browser.

From W3Scholls:

The border-radius property is supported in IE9+, Firefox 4+, Chrome, Safari 5+, and Opera.

Edited by AleMonteiro
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.