Creating an irregular border with CSS overlapping colours
<p>How would you go about creating an irregular border with variable colours like the one in the screenshot?</p>

<p><a href="https://i.stack.imgur.com/gFVEl.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/gFVEl.png" alt="enter image description here"></a></p>

<p>I considered creating a border image in a graphics editor and then using <code>border-image</code> property as described in the <a href="http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_border-image" rel="nofollow noreferrer">docs</a>.</p>

<p>However, this technique would not allow me to achieve the effect of multiple background colours (grey and white in the screenshot) entering the border "waves".</p>

<p>Another solution would be to just produce the whole background white and grey in say Photoshop, and the just use it on the website. I really wanted to avoid this for performance reasons, and would prefer to just produce a grey, checked pattern fragment and repeat it.</p>

<p>Moreover, as you can see in the screenshot, the dark fragment is an image from a carousel - the images will all come in different colours so applying a border-image to the carousel container is not a solution either.</p>

<p>I would appreciate some advice. Thanks.</p>