<!DOCTYPE html>
<html>
<head>
  <style type='text/css'>
    body {
        zoom: 1.1;
        background: white;
    }
    .button-wide {
        display: inline-block;
        position: relative;
        border: solid black;
        border-width: 0 1px;
    }
    .button-shadow {
        background: white;
        height: 0.75em;
        left: 0;
        overflow: hidden;
        position: absolute;
        right: 0;
        top: 0;
    }
    .button-text {
        line-height: 1.5em;
        position: relative;
        padding: 0 1em;
        text-align: center;
    }
    .box {
        position: relative;
        width: 51px;
        height: 20px;
        background: black;
    }

    .box > div {
        position: absolute;
        left: 1px;
        right: 1px;
        height: 1.5em;
        background: white;
    }
  </style>
</head>
<body>
    <div style="padding: 10px; font-size: 81.25%">

        <div class="button-wide">
            <div class="button-middle">
                <div class="button-shadow"></div>
                <div class="button-text">&nbsp;</div>
            </div>
        </div>
    </div>

    <div class="box">
        <div>&nbsp;</div>
    </div>

    <p>
        The two figures above should have solid 1px borders of the same height on each side. 
    </p>
</body>

</html>