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%, rg...