Triple Photo Frame

Тройная рамка для фотографии

by LuckyCat

HTML

<div class="b-photo">
    <img src="http://web.kuprina.dev.easydate.biz/aondenamoro.com/i/mobile_web_app/photo_1.jpg" width="51" height="64" alt="" />
</div>

CSS

.b-photo {
    position: relative;
    float: left;
    border: 1px solid #cbcbcb; 
    -webkit-border-radius: 3px; border-radius: 3px;
    
    width: 57px; height:70px;   
    margin: 35px;
    padding-top: 2px; padding-left: 2px;
     -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}

.b-photo:after, .b-photo:before {
    content: "";
    width: 1px;    
    display: block;
    position: absolute;     
    background: #fff; 
    border: 1px solid #cbcbcb; border-left: none;
    -webkit-border-radius: 0 3px 3px 0; border-radius: 0 3px 3px 0;
}
.b-photo:after {
    height: 64px;    
    z-index: 2;
    top:1px;
    right:-3px;
}
.b-photo:before {
    height: 60px;
    z-index: 1;
    top:3px;
    right:-5px;
}