Custom Scoop Border Style - Responsive, Custom & Dynamic Border Style - Fit In Height, Custom Border Corner - Double Stroke

Is there any way to make custom scoop border style in CSS or jQuery? Like the image below:

Solution 1:

Here's a fiddle ...http://jsfiddle.net/zjw3pg2e/5/ Does this work for you?

body {
    background: #D8D8D8;
}
.corner {
    background:white;
    height:20px;
    width:20px;    
    position:absolute;
}
#sw {
    left: -2px;
    bottom: -2px;
    border-radius: 0px20px0px0px;
    border-top: 2px solid white;
    border-right: 2px solid white;
    background:#D8D8D8;
}
#se {
    right: -2px;
    bottom: -2px;
    border-radius: 20px0px0px0px;
    border-top: 2px solid white;
    border-left: 2px solid white;
    background:#D8D8D8;
}
#nw {
    left: -2px;
    top: -2px;
    border-radius: 0px0px20px0px;
    border-bottom: 2px solid white;
    border-right: 2px solid white; 
    background:#D8D8D8;
}
#ne {
    right: -2px;
    top: -2px;
    border-radius: 0px0px0px20px;
    border-bottom: 2px solid white; 
    border-left: 2px solid white;
    background:#D8D8D8;
}

.box {
    position:relative;
    height:200px;
    width:200px;
    border: solid 2px white;
    background:#D8D8D8;
    border-radius: 5px -5px5px5px;
}
.box2 {
    position:relative;
    height:160px;
    width:160px;
    overflow:hidden;
    left: 20px;
    top: 20px;
}
.box2:before{
    content:'';
    position:absolute;
    left:0;
    margin:-20px;
    height:40px;
    width:40px;
    border-radius:100%;
    background:#D8D8D8;
    box-shadow:160px00#D8D8D8,
    0160px0#D8D8D8,
    160px160px0#D8D8D8,
    000500px white;   
}

HTML:

<divclass="box"><divid="ne"class="corner"></div><!--ne, nw, se, sw, are the corners--><divid="nw"class="corner"></div><!--of first object--><divid="se"class="corner"></div><divid="sw"class="corner"></div><divclass="box2"></div><!--box2 is the inner border object--></div>

Note that for the encompassing box, ne, nw, se, sw are the inverted corners.

For box2, It is rather difficult to explain what is going on. My suggestion is to play around with the colours of the box-shadow, as well as the pixel positions, to understand how the box-shadow gives the illusion of an inverted border.

Once you get the hang of it, it's really easy to change the dimensions so that it fits your liking.