Working on a site for a client and the design requires lots of hand drawn looking flourishes in the UI. The one that has been vexing me in laying out the markup is that of the input form field border. Enter the css3 property border-image See here for reference.

I have an image that is the height of the input elements and is the width of the max-width of the container it could appear in. So I just add this to my css file:

input[type=text] {
    -moz-border-image:url("bg-input.png") 2 2 2 round;
    -webkit-border-image:url("bg-input.png") 2 2 2 round;
    -o-border-image:url("bg-input.png") 2 2 2 round;
    border-image:url("bg-input.png") 2 2 2 round;
}

Here’s the image:

Published on August 1, 2012