Наложение изображения поверх border

Можно так http://jsfiddle.net/g8fm6n9h/

HTML

<div class="block">   
    <div class="top"></div>
    <div class="right"></div>
    <div class="bottom"></div>
    <div class="left"></div>
</div>

CSS

*{
    padding: 0;
    margin: 0;
}
.block{
    width: 300px;
    height: 300px;
    margin: 50px auto;
    position: relative;
    background: #ccc;
}
.block div{
    position: absolute;   
}
.top, .bottom{
    background: #000;
    left: 0;   
    height: 10px;
    width: 100%;
}
.top{
    background: #000;
    top: 0;   
}
.bottom{
    background: #00f;
    bottom: 0;     
}

.right, .left{   
    height: 100%;
    width: 10px;
}
.right{
    background: #f00;
    right: 0;    
}
.left{
    background: #c00;
    left: 0;    
}