HBox Image as BorderSkin

Question

I've designed a pretty 6pixel border for an HBox. It's a .png file and I tried setting it as the border skin like so:

HBox
{
    border-skin: Embed('../graphics/skins/border.png');
}

However, when I run the application, the image is used for the background instead of the border.
How do I fix this?

Answer 1

The "border-skin" includes the background as well as the "border". What you need to do if you don't want the skin image to impact the "inside" of your component, is set up a scale-9 grid and use a PNG with a transparent center.

Check this link for more info on scale-9 grids with images: http://www.nayansavla.com/blog/?p=33