Q:

stitched border effect in CSS

Currently my border looks like this:

The CSS used is:
.widget > h5 {
    border: 3px double #cccccc;
    font-size: 11px;
    letter-spacing: 1px;
    margin-bottom: 30px;
    padding-bottom: 12px;
    padding-top: 12px;
    text-align: center;
    text-transform: uppercase;
}

My question is how do i create a stitched effect similar to this:

.stitched_element {
border: 2px dashed  #ffffff;
box-shadow: 0 0 0 8px #ff0030;
}

A:

If you don't need the triangle, use Edmond Wang's solution (which is working everywhere).

But if you do need it, you'll have to create it using canvas or svg, which is more complex and may not work on every browser.
I still made a fiddle where you can see the result using canvas :
<canvas width="500"></canvas>

var canvas = document.querySelector('canvas');
var ctx = canvas.getContext('2d');

// Then use ctx to draw what you need e.g :
ctx.fillStyle = 'black';
ctx.fillRect(0, 0, 100, 100); 
// Draws a black rectangle at (X,Y)=(0,0) and width & height = 100px

