IE11 border style issue when sides are different colors

HTML & CSS
,
1

I’ve encountered an issue with border style and IE11 being different than the way firefox and chrome display it.

In IE11, on the green and blue colored elements, there is a bevel visible on the bottom right corner when the bottom-boarder and right-boarder are different colors.

That beveling is not visible in chrome and firefox. I can’t seem to find anything that will eliminate that in IE11. Any ideas?

Example code:

Chrome screenshot:

IE11 screenshot:

2

Problem solved.

IE didn’t like having borders on both TR and TD. I removed the borders on the TR and just used borders for TD elements only.

3

Indeed it is.

Please try this and see if it is satisfactory.

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="stylesheet" href="css/stylesheet.css">
    <title>borders</title>
<!--
https://www.sitepoint.com/community/t/ie11-border-style-issue-when-sides-are-different-colors/283713
force
Dec 12, 2017 11:50 AM

-->
    <style>
body {
    background-color:white;
}
table {
    background-color:lightgray;
    border-right:6px solid lightgray;
    border-left:6px solid lightgray;
    border-bottom:6px solid lightgray;
    border-spacing:0;
    border-radius:4px;
}
table th,
table td {
    border:none;
    padding:14px;
    text-align:center;
    vertical-align:middle;
}
table th {
    font-weight:bold;
    color:gray;
    text-transform:uppercase;
}
table td:nth-child(1) {
    text-align:left;
    background-color:#fff;
    border-top:2px solid lightgray;
    border-bottom:2px solid lightgray;
}
table tr:first-child td:first-child {
    border-top:0;
}
table tr:last-child td:first-child {
    border-bottom:0;
}

table td:nth-child(2),
table td:nth-child(3) {
    color:white;
    font-weight:bold;
}
table td:nth-child(2) {
    background-color:lightgreen;
    box-shadow:inset 0px 0px 0px 10px green;
    border-right:2px solid #fff;
}

table td:nth-child(3) {
    background-color:lightblue;
    box-shadow:inset 0px 0px 0px 10px blue;
    border-left:2px solid #fff;
}
    </style>
</head>
<body>

<div class="container">
    <table>
        <thead>
            <tr>
                <th>afdas sdf sadf</th>
                <th>dfhfd</th>
                <th>gjklg</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>afdas sdf sadf</td>
                <td>dfhfd</td>
                <td>gjklg</td>
            </tr>
            <tr>
                <td>afdas sdf sadf</td>
                <td>dfhfd</td>
                <td>gjklg</td>
            </tr>
            <tr>
                <td>afdas sdf sadf</td>
                <td>dfhfd</td>
                <td>gjklg</td>
            </tr>
            <tr>
                <td>afdas sdf sadf</td>
                <td>dfhfd</td>
                <td>gjklg</td>
            </tr>
        </tbody>
    </table>
</div>

</body>
</html>

“jing” talk about timing :lol:

4

When using real HTML tables, one should not apply any style with a width to a TR element. Think of them as “virtual elements” whose only purpose is to separate the rows.

PS: it wasn’t just IE11, there was a similar “misbehavior” in FF.

5

Thanks for taking the time to help, I appreciate it :slight_smile:

1 Like
6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.