css - Square gradient background image, corner radius and transparency -

i find hard describe effect want words created in photoshop , can see image below:

as can see have red square 38pixel border. border outside , style set shape burst. unfortunately don't think similar style in css. border color set linear gradient color inside being same red square , outer color set transparent white. don't pay attention green underneath layer show transparency of border.

what know, if there way achieve effect css or jqueryui maybe.

i have been trying while in this jsfiddle, don't know how make more square.

here's code in use in 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; } 

how below, using 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 outset border without 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>