blob: 513e38b3e54da24d7e41c5bc0a060f43644b618f [file] [log] [blame]
<!DOCTYPE html>
<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;
<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 class="box">
The two figures above should have solid 1px borders of the same height on each side.