Square gradient background image, corner radius and transparency

Question

I find it hard to describe the effect I want with words so I created it in Photoshop and you can see the image below:

As you can see I have a red square with a 38pixel border. The border is outside and its style is set to shape burst. But unfortunately I don't think a similar style is in CSS. The border color is then set to linear gradient with the color inside being the same red as the square and the outer color is set to transparent white. Don't pay attention to the green that is the underneath layer just to show the transparency of the border.

What I would like to know, is if there is ANY way to get to achieve this effect with CSS or jQueryUI maybe.

I have been trying for a while in THIS JSFIDDLE, but I don't know how to make it more like a square.

Here's the code in use in the fiddle above

<div class="test"></div>


    .test {
    width: 300px;
    height: 300px;
    border: 3px solid black;
    background-image: -webkit-radial-gradient(closest-side, rgba(255,0,0,1) 0, rgba(255,0,0,1) 75%, rgba(244,90,90,0.5) 88%, rgba(255,255,255,0) 100%);
    background-image: -moz-radial-gradient(closest-side, rgba(255,0,0,1) 0, rgba(255,0,0,1) 75%, rgba(244,90,90,0.5) 88%, rgba(255,255,255,0) 100%);
    background-image: radial-gradient(closest-side, rgba(255,0,0,1) 0, rgba(255,0,0,1) 75%, rgba(244,90,90,0.5) 88%, rgba(255,255,255,0) 100%);
    background-position: 50% 50%;
    -webkit-background-origin: padding-box;
    background-origin: padding-box;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    -webkit-background-size: auto auto;
    background-size: auto auto;
}

Answer 1

How about the below, using an inset box shadow:

div {
  background: red;
  height: 200px;
  width: 200px;
  -webkit-box-shadow: inset 0 0 40px 20px green;
  box-shadow: inset 0 0 40px 20px green;
}

<div></div>

Or...for for an outset border without the green:

div {
  background: red;
  height: 200px;
  margin: 50px;
  width: 200px;
  -webkit-box-shadow: 0 0 30px 20px #FF0303;
  box-shadow: 0 0 30px 20px #FF0303;
}

<div></div>