Creating specific border effect - css

Question

How do I create the border effect of each of the tiles in the Fifteen puzzle below (the sharp edges on each corner of the tiles)?

Answer 1

You can also use :pseudo elements and border
codepen - http://codepen.io/victorfdes/pen/GJYGKV
*,
*:before,
*:after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.a {
width: 100px;
display: inline-block;
height: 100px;
position: relative;
overflow: hidden;
}
.a:nth-child(even) .b {
background: #DCD8BB;
}
.b {
position: absolute;
width: 116px;
height: 116px;
border: 4px solid #8B8B83;
transform: rotate(45deg) translate(-50%, -50%);
transform-origin: left top;
top: 50%;
left: 50%;
background: #490506;
z-index: -1;
}
.b:before,
.b:after {
content: '';
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%) rotate(-45deg);
background: inherit;
border-color: inherit;
}
.b:before {
border-width: 0 4px;
border-style: solid;
width: 100px;
height: 60px;
}
.b:after {
border-width: 4px 0;
border-style: solid;
height: 100px;
width: 60px;
}
.b span {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(-45deg);
z-index: 1;
color: grey;
font-size: 30px;
}
<div class="a">
<div class="b">
<span>1</span>
</div>
</div>
<div class="a">
<div class="b">
<span>2</span>
</div>
</div>
<div class="a">
<div class="b">
<span>3</span>
</div>
</div>
<div class="a">
<div class="b">
<span>4</span>
</div>
</div>

Answer 2

SVG clip-path is what you are looking for, but it is not widely supported.
It is talked about here: Slanted Corner on CSS box
The one you want is called a Bevel Box:
-webkit-clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%);
clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%);