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.