CSS

<style type="text/css" >
.squarebanner {
width:296px;
padding:10px 10px 10px 10px;
background:#fff;
border:1px solid #ddd;
margin-bottom:10px;
}
.squarebanner ul{
list-style-type:none;
margin: 0px auto;
padding: 10px 0px 0px 0px;
width:300px;
overflow:hidden;
}  
.squarebanner ul li{
list-style-type:none;
margin: 0px 7px 0px 7px;
float:left;
padding:5px;
display:inline;  
background:#e42b2b;
-webkit-transition:all 0.2s ease;
-moz-transition:all 0.2s ease;
-o-transition:all 0.2s ease;
-webkit-border-top-left-radius:80px;
-webkit-border-bottom-right-radius:80px;
-moz-border-radius-topleft:80px;
-moz-border-radius-bottomright:80px;
border-top-left-radius:80px;
border-bottom-right-radius:80px;
}
.squarebanner ul li:hover{
-webkit-border-top-left-radius:40px;
-webkit-border-bottom-right-radius:40px;
-moz-border-radius-topleft:40px;
-moz-border-radius-bottomright:40px;
border-top-left-radius:40px;
border-bottom-right-radius:40px;
}

.squarebanner ul li a img{
-webkit-box-shadow:0 0 8px rgba(0,0,0,0.5);   
-moz-box-shadow:0 0 8px rgba(0,0,0,0.5);
box-shadow:0 0 8px rgba(0,0,0,0.5);
padding:3px;
}
</style>