Android 9-patch image in HTML5 CSS3

One feature that Android has adopted is 9-patch images. The Android Studio contains a Draw 9-patch tool which lets you 'create bitmap images that automatically resize'. Basically you select areas of an image that can be repeated or stretched while others are kept at the same size. Giving you almost SVG functionality for bitmap images, especially great for buttons.

Now this feature would be great for web as well, e.g. responsive design pages. To achieve this we can use the CSS3 feature border-image which combines border-image-source, border-image-width, border-image-slice and border-image-outset.

border-image-source defines which image to use.

border-image-width defines the width of the border image. Stretches or shrinks the image regions to fit the widths.

border-image-slice divides the image into 9 regions, thereby the name (see the image above) deciding which parts can be repeated/stretched. The regions are: four corners, four edges and a middle. The fill property decides if the middle should be filled in or kept transparent.

border-image-outset decides how far out from the border the image will appear. Together with border-width this enables the border to not take up all the space inside the container caused by it having a wide border to fit the image inside (See http://www.norabrowndesign.com/css-experiments/border-image-frame.html#one). This is especially great for select/dropdown boxes as they can't work around this by using line-height (http://stackoverflow.com/questions/18613279/text-over-the-top-of-a-border-image-using-the-border-as-an-expandable-backgroun)

border-image combines the four above properties, but I felt I had more control when splitting them up. However, as of right now browser support for border-image and especially border-image-outset is a bit limited. Most browsers support border-image, but might need browser-specific CSS (e.g. -webkit-border-image).


 Example:
border-style: solid;
border-width: 5px;
border-image-source: url(dropdown.png);
border-image-width: 25% 10% 25% 5%;
border-image-slice: 10 70 20 60 fill;
border-image-outset: 12px;

http://border-image.com lets you generate border-image CSS from an image. but it doesn't put in border-image-outset.

Source:
https://github.com/chrislondon/9-Patch-Image-for-Websites/wiki/What-Are-9-Patch-Images
http://stackoverflow.com/questions/6806559/does-9-patch-png-can-work-somehow-with-css-on-browsers
http://stackoverflow.com/questions/3659457/nine-patch-images-for-web-development
https://teamtreehouse.com/forum/borderimageslice-vs-borderimagewidth