Decorated Rectangles

Decorations are the borders and edges of a rectangular user-interface element. These do not generally include shadows.

We're using the standard "give me the corners and borders" rectangles for the UI decorations, with one notable exception: all of the pieces are in one bitmap. This document specifies how that bitmap works.

[decorated rectangle source file, 3x upsampled from 15x15.]

[decorated rectangle in use, 1:1]

First, your file has to be odd x odd in dimension. This means that you can have 17x1, or 21x15, or 15x15, but not 4x4. The reason for this is so we always have a "center pixel" -- whether for edges or center fill.

About the pictures above: the center pixel [] fills the entire rectangle not consumed by the borders. The border pixels tile the four corners, and the edges [], not including the center, tile the edges of the rectangle.

Any pixel can be transparent. If you want to make roundrects, you can do that using the borders. If you want to make the center pixel transparent, you can do that too. The borders will assume they have alpha always, but the center will be faster if it's fully opaque or fully transparent (fastest, of course, if it's fully transparent.)

As in the UI, you have to put your images on a layer, not on a background (i.e. there must be an alpha channel.)