display table and bad overflow: hidden in IE and MS Edge

Question

I have border-radius and overflow: hidden on the parent element to hide anything overflowing inner.

It should looks like this:

It works everywhere except IE and Edge. In these browsers, it looks like this:

HTML:

<div class="table">
    <div class="col1"></div>
    <div class="col2"></div>
</div>

CSS:

.table {
    border-radius: 10px;
    border: 1px solid black;
    overflow: hidden;
    display: table;
    width: 100%;
}

.col1 {
    background: pink;
    display: table-cell;
    width:50px;
}

.col2 {
    background: orange;
    display: table-cell;
    height: 200px;
}

Answer 1

Just set border-radius on the .col1 and .col2

.table {
    border-radius: 10px;
    border: 1px solid black;
    overflow: hidden;
    display: table;
    width: 100%;
}

.col1 {
    background: pink;
    display: table-cell;
    width:50px;
    border-radius: 10px 0px 0px 10px;
}

.col2 {
    background: orange;
    display: table-cell;
    height: 200px;
    border-radius: 0px 10px 10px 0px;
}

<div class="table">
    <div class="col1"></div>
    <div class="col2"></div>
</div>

Answer 2

Over flow has some issues non-block elements. So try adding a wrapping div for ".table" ans apply overflow: hidden for that wrapper. See the sample. below

.table-wrapper{
                border-radius: 30px;
                background: #ccc;
                overflow: hidden;
                display: block;
                width: 200px;
            }
            .table {
                display: table;
                width: 200px;
            }

            .col1 {
                background: rgba(255,0,0,.3);
                display: table-cell;
                width:50px;
            }

            .col2 {
                background: rgba(0,255,0,.2);
                display: table-cell;
                height: 200px;
            }

<div class="table-wrapper">
            <div class="table">
                <div class="col1"></div>
                <div class="col2"></div>
            </div>
        </div>