<style>.r1, .r2, .r3, .r4, .r5{
display: block;
overflow: hidden;
font-size:1px;
float: none;
}
.r5{
margin: 0 6px;
height: 1px;
background-color: #000;}
.r4{
margin: 0 4px;
height: 1px;
border-right: 2px solid #000;
border-left: 2px solid #000;
background-color: #CCCCCC;}
.r3{
margin: 0 3px;
height: 1px;
border-right: 1px solid #000;
border-left: 1px solid #000;
background-color: #CCCCCC;}
.r2{
margin: 0 2px;
height: 1px;
border-right: 1px solid #000;
border-left: 1px solid #000;
background-color: #CCCCCC;}
.r1{
margin: 0 1px;
height: 2px;
border-right: 1px solid #000;
border-left: 1px solid #000;
background-color: #CCCCCC;}
.inner-box {
padding:1em;
border-right: 1px solid #000;
border-left: 1px solid #000;
background-color: #CCCCCC;}</style>

<table>
    <tr>
        <td>

            <div id="rounded-box-5">

                <i class="r5"></i>
                <i class="r3"></i>
                <i class="r2"></i>
                <i class="r1"></i>
                <i class="r1"></i>

                <div class="inner-box">
                    <table>
                        <tr>
                            <td>
                                text
                            </td>
                        </tr>
                    </table>
                </div>

                <i class="r1"></i>
                <i class="r1"></i>
                <i class="r2"></i>
                <i class="r3"></i>
                <i class="r5"></i>

            </div>

        </td>
    </tr>
</table>