retina border

retina 1px border

by basecss

HTML

<header>
    <table>
        <tr>
           <td>
               <h2>List Capabilities</h2>
           </td>
        </tr>
    </table>
</header>


<ul>
    <li>List Item 1
    <li>List Item 2
    <li>List Item 3
    <li>List Item 4
    <li>List Item 5
    <li>List Item 6
    <li>List Item 7
    <li>List Item 8
</ul>

CSS

* {
    -webkit-touch-callout:none;
    -webkit-tap-highlight-color:rgba(0,0,0,0);
    -webkit-text-size-adjust:none;
    -webkit-user-select:none
}
body {
    font-family:'Helvetica Neue', Helvetica, sans-serif;
    font-size: 14px;
    line-height: 18px;
    min-height:416px;
}




header {
    background:-webkit-gradient(linear, left top, left bottom, from(#F5842F), to(#C25400));
    border-bottom:1px #7D3600 solid;
    height: 29px;
    padding: 7px 5px;
    -webkit-box-shadow:inset 0 1px 1px -1px #fff;
}
header table {
    table-layout: fixed;
    border-collapse:collapse;
    height:29px;
    width:100%;
}
header table td {
    padding: 0;
    vertical-align: middle;
    text-align: center;
    width: 50%;
    min-width: 160px;
}
header table td h2 {
    font-size: 16px;
    line-height: 20px;
    font-weight:bold;
    overflow:hidden;
    text-overflow:ellipsis;
    text-shadow:0 -1px 0 rgba(0, 30, 84, .3);
    white-space:nowrap;
    color:#fff;
}




ul {
    margin:0;
    padding:0;
}
li {
    padding:10px;
    background:-webkit-gradient(linear, left top, left bottom, from(#fbfcfc), to(#f7f8f8));
    border-top:1px #ffffff solid;
    border-bottom:1px #d8d9d9 solid;
    font-size:12px;
    color:#6A6F71;
    font-weight:bold;
}



@media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) {

    li {
        border:0;
        padding:11px;
        -webkit-box-shadow:inset 0 1px 2px -1px #fff,
                           inset 0 -1px 1px -1px #888;
    }

}