Flex 3 Using an image as a border

I am working on a custom container and I need a border for this container. I have a 15x15 image with which I am creating a 9-cut border. The problem I'm running into is that the border skin doesn't appear the way I hoped.

Ss skin is here.

Ideally, I should have a transparent box with a 5 pixel border around it.

Here is my current test code:

CSS code:

Box
 {
borderSkin: Embed(source="15x15.png",
            scaleGridLeft="5",
            scaleGridTop="5",
            scaleGridRight="10",
            scaleGridBottom="10");
 }

      

        
        
        
      

    

MXML code:

<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Style source="MainTest.css"/>

<mx:Box id="tw" width="400" height="400">

</mx:Box>
</mx:WindowedApplication>