CSS Webkit mask image add an outline / border?

Question

I'm using -webkit-mask-box-image with a png file on a coloured background to achieve a shape in whatever colour I want without having to have a file in each colour.

background-color: blue;
-webkit-mask-box-image: url("http://i.imgur.com/9Xo9L4Z.png");

I'll be using more complex shapes, the hexagon in the jsfiddle is only an example:

http://jsfiddle.net/TtR3b/

Is there any easy way I could add an outline to the resulting shape? I'm hoping there is some property or method to allow this or maybe there some way to manipulate the mask image to allow an outline?

I tried this but anything added simply formed part of the mask, even if the outline is in a different colour. My only other option is overlaying an extra image that contains just the outline I want but that seems wasteful if there's a better approach.

Answer 1

So I was able to do it using a second image behind the first, slightly larger.

#mask {
  position: absolute;
  width: 98%;
  height: 98%;
  top: 1%;
  left: 1%;
  background-color: blue;
  -webkit-mask-box-image: url("http://i.imgur.com/9Xo9L4Z.png");
}

#maskborder {
  position: absolute;
  width: 50%;
  height: 50%;
  background-color: red;
  -webkit-mask-box-image: url("http://i.imgur.com/9Xo9L4Z.png");
}

<div id="maskborder">
  <div id="mask"></div>
</div>

edit: http://jsfiddle.net/TtR3b/2/