How Can I Make An Arbitrary Sized Html Element With Partially Transparent Borders?

Consider the following image: This is supposed to look like a patch of grass with rough (deckled) edges. It's a 200x200 pixel png image, with transparency at the edges to give a

Solution 1:

A jQuery solution:

http://code.google.com/p/scale9grid/

---

border-image is the pure CSS solution:

• http://www.w3.org/TR/css3-background/#border-images
• https://developer.mozilla.org/en/CSS/-moz-border-image

Unfortunately, the browser support is not yet good enough: http://caniuse.com/border-image

A generator: http://border-image.com/

Solution 2:

You can do it with the CSS3 border-image property. It is supported (in the form of prefix variants) by all major browsers except you-know-who.

Solution 3:

sounds to me like you need top,bottom,left,right images (and images for the 4 corners), with a central image you can repeat. Then a little CSS to put them all together correctly. Much like how people used to do rounded corners! The real trick is getting a repeatable central image. That may be made simpler by only sizing your central div in steps which match the size of the central image you end up with.

TBH I don't even know if it's possible to come up with a central mage that won't look like a patch work quilt when repeated.

EDIT I've had a better idea!

If you create images that are effectively masks to "let through" you grassy image. You could use a css sprite technique to size you image, then overlay the side/corner images to get the ragged edge effect. The css sprite would be pulled out of a larger image, large enough to cope with your maximum expected "tile".

Solution 4:

You could wrap your content area in 4 other divs and give the PNG as an image for a different side for each of the divs. The problem is that your content area div will have a solid background and that will show up in the transparent area for your edges.

That being said, you can take a different approach.

Top div Float Left Edge Div, Content Div, Float Left Edge Div (right edge) Bottom div

This will be cross browser compatible though a pain to setup.