CSS- how to give an object with scooped corners a border colour? - html

Question

I created the following object with scooped borders ... http://jsfiddle.net/zjw3pg2e/
I want a way using pure CSS to give the object a black border. All my attempts at doing so have thus far failed.
HTML:
<div class="box"></div>
CSS:
.box {
position:relative;
height:200px;
width:200px;
overflow:hidden;
/*border: solid 2px black;*/
}
.box:before{
content:'';
position:absolute;
/*border: solid 2px black;*/
left:0;
margin:-20px;
height:40px;
width:40px;
border-radius:100%;
background:white;
box-shadow:200px 0 0 white,
0 200px 0 white,
200px 200px 0 white,
0 0 0 500px blue;
}
I tried setting the border for .box and .box:before as border: solid black 2px;, but this doesn't do what I am trying to achieve. I need the border to fit the shape of the object perfectly.
I suspect there's a way to do it by altering the box-shadow, but I can't figure it out. Any help is appreciated.

Answer 1

I did it with pure css in this example using 4 extra divs:
If youre worried about overflow you can just wrap it in an extra div.
JS FIDDLE
css:
.corner {
background:#fff;
height:20px;
width:20px;
position:absolute;
}
#sw {
left: -2px;
bottom: -2px;
border-radius: 0px 20px 0px 0px;
border-top: 2px solid #000;
border-right: 2px solid #000;
}
#se {
right: -2px;
bottom: -2px;
border-radius: 20px 0px 0px 0px;
border-top: 2px solid #000;
border-left: 2px solid #000;
}
#nw {
left: -2px;
top: -2px;
border-radius: 0px 0px 20px 0px;
border-bottom: 2px solid #000;
border-right: 2px solid #000;
}
#ne {
right: -2px;
top: -2px;
border-radius: 0px 0px 0px 20px;
border-bottom: 2px solid #000;
border-left: 2px solid #000;
}
.box {
position:relative;
height:200px;
width:200px;
border: solid 2px black;
background:blue;
border-radius: 5px -5px 5px 5px;
}
html:
<div class="box">
<div id="ne" class="corner"></div>
<div id="nw" class="corner"></div>
<div id="se" class="corner"></div>
<div id="sw" class="corner"></div>
</div>

Answer 2

So the solution I came up with... uses 3 divs (an outer-box, box, and inner-box).
The box:before/:after and box-inner:before/:after are the semi-circles. around the sides, that I gave a white background with a black border.
JS Fiddle
.box-wrapper{
position:relative;
height:202px;
width:202px;
overflow:hidden;
}
.box {
position: absolute;
height:200px;
width:200px;
background: blue;
border: 1px solid #000;
}
.box:before,
.box:after,
.box-inner:before,
.box-inner:after {
background: #fff;
content: ' ';
display: block;
height: 3em;
width: 3em;
border-radius: 50%;
border: solid 1px black;
position: absolute;
}
.box:before {
top: -1.5em;
left: -1.5em;
}
.box:after {
top: -1.5em;
right: -1.5em;
}
.box-inner:before {
bottom: -1.5em;
left: -1.5em;
}
.box-inner:after {
bottom: -1.5em;
right: -1.5em;
}
<div class="box-wrapper">
<div class="box">
<div class="box-inner"></div>
</div>
</div>
Normally you can apply a box-shadow: 0 0 1px #000;, which lets you give a border-like effect on top of borders, however the circles make the relative .box div will always sit on top of its :before/:after (making the box-shadow solution unobtainable).