Border Images – I wanted to test the use of the border-image property in a production environment, so I came up with dimensions and a layered image. Since my site must be easily viewed and understood from mobile to workstation the dimensions of the border image had to fit a wide image size range. I was hoping to have the dimensions of the border-image scale with screen size. My understanding is this is not currently possible. I had to keep scaling the dimensions down. The third try was a ‘charm.’ I used this third layered file as a template and rapidly created fourteen unique border-image files for fourteen pages, one per page. Click on the border-image to go to the page where it is used. I find that by using a well designed template the resulting border-image performs well and its CSS is trivial to create.
 
I am using the ‘border-image’ CSS Backgrounds and Borders Module Level 3 property. It has a Candidate Recommendation. I hope it is endorsed by the committee. Border Images have great design potential.
This is the CSS style for each of the following border image maps:

/*	Border Image	*/

.generic {
	border-width: 29px 29px 23px 29px;
	-moz-border-image:	url("/wp-content/uploads/year/month/generic.jpg") 96 96 192 192 round;
	-webkit-border-image:	url("/wp-content/uploads/year/month/generic.jpg") 96 96 192 192 round;
	border-image:		url("/wp-content/uploads/year/month/generic.jpg") 96 96 192 192 round;
	border-style: solid;	
	margin:	0;
	width: 100%;
}