Gradient Border fade surrounding div with css/html

Hi I was trying to figure out how to create a border that fades into the background colour of a div and this is the only solution I could come up with. I've googled around and it seems people suggest CSS3 but I was told it was still "under development" and not fully introduced in modern browsers, correct me if I'm wrong, probably am.

Anyway this is the solution I came up with, are there simpler ways of doing it or is this a reasonable approach?

Created numerous divs for each part of the border (as below), and set thei开发者_StackOverflow社区r background image according to the part of the border: http://i.imgur.com/sh6Z8.png

HTML & CSS: http://codeviewer.org/view/code:1e4f

(New to webdevelopment and stack overflow, sorry if I'm doing anything unorthodox, thanks).

So as Tim there already said it, if the width of your website is static, you can do something like that ( In fact even if css3 may be good option for your usage case This is super simple... )

http://jsfiddle.net/Xtw84/3/ - this is from a prior answer so the edges are not soft but the idea is the same. ( doesnt matter ) I also added image in the background so you can see how that would work. Theres no need.. actually makes no sense to slice the background image in half.

Heres a bit more stripped down version of it. http://jsfiddle.net/Xtw84/4/

With css3 i would do this with box-shadow and just expand the shadow as much as needed.

Is your layout going to be fluid? e.g. it will grow in width/height? If it isnt going to grow in width, then there is no reason that you can not just set the background image.

For what you are doing, I wouldn't use gradient borders and just stick with the images in the background.