Custom Dotted Border

by HugeHugh

HTML

<div class="con">
    <div class="dotted"></div>
    <div class="img"></div>
    <div class="dotted lower"></div>
</div>

CSS

body {
    background: #444;
}
.con {
    background: blue;
    padding: 3px 0;
    display: inline-block;
    position:relative;
}

.img {
    width: 80px;
    height:80px;
    background: black;
}

.dotted {
    background-image: radial-gradient(rgba(255,255,255,0.5) 15%, black 22%, transparent 23%),
    radial-gradient(rgba(255,255,255,0.5) 15%, black 22%, transparent 23%);
    background-size:18px 18px;
    background-position:4px 0;
    height:11px;
    margin-top:-10px
}
.lower {
    position:relative;
    top:3px;
}

JavaScript

// todo: use :before and :after instead of .dotted and .dotted.lower 1