CSS3's image-border playground

The image which is actually being used is:

Description

This page is intended to be a playground for the new CSS3 property "border-image", which is currently understood by a lot of browsers. The new "border-image" property defines an image that should be used to fill the borders of a visible DOM element. Its behaviour depends on:

• 1	2	3
  4	5	6
  7	8	9

  Size of the corners: The used image will be slices in 9 parts, which will be used to fill different parts of the element. The size of these parts is defined as
  top_right_width top_right_height bottom_left_width bottom_left_height
• Resampling algorithm: The parts of the element's border that can change its size (2, 4, 5, 6, 8) may use either a "round" algorithm or a "stretch" one. When using "round" the image will be repeated and stretched to seamless fit with the parts on its sides. On the other hand, when using "stretch" the image will be interpolated to fit the size of its part.

You can use the params in the top of this page to play with these values and learn how an image will behave with any selection of them. All listed images are 81x81 pixels.

You can read more about this in Css3.info and W3C specification on borders.

You can download this very same page in HTML to play locally, as the code is all built into it (except the images, but you can either download the ones in this page or add some of your own). Any ideas or improvements can be sent to miguelmail _atarroba_ gmail _puntodot_ com

Too cool for Internet Explorer