Salve, sul web trovi diversi metodi per fare ciò che chiedi.
In alcuni esempi sono utilizzati gli pseudo-elementi ::before e ::after a cui sono applicate differentemente le proprietà background necessarie per creare quell'effetto:
https://codepen.io/berky93/pen/hqBwv
https://codepen.io/AndreiDodu/pen/gziqn

In quest'altro esempio, a parte l'uso di due elementi HTML distinti (che credo siano sostituibili comunque con ::before e ::after), viene usato lo stesso effetto per entrambi ma, per uno di questi, vene applicato un ribaltamento in modo da far figurare correttamente il bordo a zig zag:
http://jsfiddle.net/yKPe9/3/

O ancora, in altri casi viene usata la proprietà border-image a cui è applicato un svg:
https://codepen.io/atelierbram/pen/vrdKB

Senza stare a reinventare la ruota, vedi se adeguando qualcosa di già pronto, come questi esempi, puoi ottenere il risultato richiesto.