Irregular, flexible CSS3 boxes using border-image
CSS3's border-image property is a brilliant tool that allows a developer to add flexible, resizable but highly designed boxes to webpages.
Without splitting a background image into a large number of elements and positioning them individually in a single div element. Other than being incredibly fiddly and difficult to update, this also breaks the sensible distinction between content/presentation that developers strive to maintain in modern sites.
Generate the source image for the box's background. Ensure that the image is large enough that no obvious artifacts will appear when it is rendered at the sizes you expect the box to have to stretch to. For many designs a huge png won't take up much more room than a scaled down version. If your design requires a drop shadow this has to be included in the image - sadly css3 box-shadows still apply to the image as a whole and discount transparent regions of the image.
Calculate the size of the border on each edge of the image: this is the portion that contains all of the variability in the shape of the border. The area 'within' the border should be an area of solid colour or a gradient that can be represented accurately in CSS (in the above image, for example, the borders are respectively 13, 16, 17 and 16 pixels - I'll use this throughout).
Add the div for the box. Size it as desired. Then set the border-image attribute (and it's attendant browser-specific variants, replacing the border sizes as appropriate):
-webkit-border-image: url("/path/to/image.png") 13 16 17 16 stretch; -o-border-image: url("/path/to/image.png") 13 16 17 16 stretch; -moz-border-image: url("/path/to/image.png") 13 16 17 16 stretch; border-image: url("/path/to/image.png") 13 16 17 16 stretch;
Hint: using box-sizing: border-box; can really help with variable height/widths
Specify the border-width, or you won't see it!
border-width: 13px 16px 17px 16px;
You should add a content div within this one - all elements will be positioned within the inner bound of the border, as you'd expect. Depending on the size of the border, a content div will help with adding additional padding. The size of the box should be determined by the size of the content.
At this point you'll probably have a box with a hollow white content area. To fill it out you need to add an appropriate background to the content area. If this is consistent you might be able to specify it simply with background-colour or a CSS3 gradient. Alternatively by trimming the previously defined "border" off of your source image, you can generate a background image for the content area that you can scale using the background-size property.
It's always possible to explore using a background image with background-size: contain for the entire stretchable border image...