I find it difficult to describe the effect that 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 border of 38 pixels. The border is outside, and its style is tuned to form a splash. But, unfortunately, I do not think that similar style in CSS. Then the border color is set to a linear gradient, with the color inside becoming as red as the square, and the outer color transparent. Ignore the green under the layer to show the transparency of the border.
What I would like to know is if there is ANY way to achieve this effect using CSS or jQueryUI, perhaps.
I tried for a while in THIS JSFIDDLE , but I don't know how to make it look more like a square.
Here is the code used 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; }