Stackoverflow - How to apply border to a whole shape?

http://stackoverflow.com/q/16508834/918414

by khamer

HTML

<script src="http://thinkingstiff.com/stackoverflow/jsfiddle.js"></script>
<div class="thing">cloud</div>

CSS

.thing {
  width: 17rem;
  height: 12rem;
  background: 
  linear-gradient(white calc(100% - 5px), black calc(100% - 5px)) 40% 100% / 60% 40% no-repeat,
    /*radial-gradient(closest-side, white calc(100% - 6px), transparent calc(100% - 5px)) calc(100% - 3.5em) 1.5em / 7em 7em no-repeat,*/
    radial-gradient(closest-side, white calc(100% - 6px), black calc(100% - 5px), black 100%, transparent) 3.5em 3em / 4em 4em no-repeat,
    radial-gradient(closest-side, white calc(100% - 6px), black calc(100% - 5px), black 100%, transparent) calc(100% - 3.5em) 1.5em / 7em 66.66% no-repeat,
    radial-gradient(closest-side, white calc(100% - 6px), black calc(100% - 5px), black 100%, transparent) 0 100% / 40% 60% no-repeat,
    radial-gradient(closest-side, white calc(100% - 6px), black calc(100% - 5px), black 100%, transparent) 100% 100% / 40% 60% no-repeat;
}

body{
    background-color: #4ca3ff;
}