Use an image for a header border bottom

I want to use an image for the bottom border of an image. The image used for the border bottom is 400px for example, however I don't want it to display a 400px bottom border for headings the are only short, I want it to auto-scale.

Is there a way to display only the amount required for individual headings rather tha开发者_如何学编程n having to make up lots of image sizes for multiple heading widths.

Thank you for any help in advance...

You can use the CSS3 border-image property.

For instance

DIV {
  border: double orange 1em;
  border-image: url("border.png") 27 round stretch;
 }

You can stretch or repeat as necessary.

Read more here: http://www.w3.org/TR/css3-background/#border-images

If looks as if you could also slice the image

And more here: http://www.w3.org/TR/css3-background/#border-image-slice