Some borders

by NicosKaralis

HTML

<div class="light">
    Hi scrollbar!
</div>
<div class="dark">
    Hi scrollbar!
</div>
<div class="shadow">
    Hi scrollbar!
</div>
<div class="pressed">
    Hi scrollbar!
</div>
<div id="indented">
    <ul>
        <li><a href="">1</a></li>
        <li><a href="">2</a></li>
        <li><a href="">3</a></li>
    </ul>
</div>

CSS

body {
    background:black;
}
div {
    width:100px;
    height:100px;
    margin: 10px;
    float: left;
}

.light {
    outline: 1px solid #ddd;
    border-top: 1px solid #fff;
    padding: 10px;
    background: #f0f0f0;
}
.dark {
    color:white;
    outline: 1px solid #111;
    border-top: 1px solid #555;
    padding: 10px;
    background: #333;
}
.shadow {
    padding: 20px;
    border: 1px solid #f0f0f0;
    border-bottom: 2px solid #ccc;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    
    background:white;
}
.pressed {
    color: #fff;
    padding: 20px;
    background: #111;
    border: 1px solid #000;
    border-right: 1px solid #353535;
    border-bottom: 1px solid #353535;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

#indented ul{
    margin: 20px 0; padding: 0;
    list-style: none;
    /*background: #ccc;*/
}
#indented ul li {
    border-top: 1px solid #333;
    border-bottom: 1px solid #111;
}
#indented ul li:first-child {border-top: none;}
#indented ul li:last-child {border-bottom: none;}
#indented ul li a {
    padding: 10px;
    display: block;
    color: #fff;
    text-decoration: none;
}
#indented ul li a:hover {background: #111;}

JavaScript

/* Borders */