Improved first/last child border demo

Demonstrates how to remove the the square child background artifact which will ruin a parents rounded borders on hover.

by honkskillet

HTML

<div id="items">
       <div >One</div>
       <div>Two</div>
       <div>Three</div>
       <div >Four</div>
    </div>

CSS

#items {
    border: 1px solid black;
    border-radius: 10px;
    overflow: hidden;
    position: absolute;
    }
    #items div {
    border-bottom: 1px solid black;
    padding: 5px;
    }    
    #items div {
    border-bottom:none; //removes the double border on the bottom
    }
    #items div:hover{
    background-color: #ccc; //this is the only background color def you need
    }
    #items div:first-child:hover {
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    }
    #items div:last-child:hover {
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
     }