.center {
    text-align: center;
    margin: 0 auto;
    overflow: hidden;
    width: 600px;
}
 .t {float: left; background: url(dot2.gif) 0 0 repeat-x } /* just remove float for non hugging version */ 
.b {background: url(dot2.gif) 0 100% repeat-x}
.l {background: url(dot2.gif) 0 0 repeat-y}
.r {background: url(dot2.gif) 100% 0 repeat-y}
.bl {background: url(bl2.gif) 0 100% no-repeat}
.br {background: url(br2.gif) 100% 100% no-repeat}
.tl {background: url(tl2.gif) 0 0 no-repeat}
.tr {background: url(tr2.gif) 100% 0 no-repeat; }