How to Blur Div Edges

Question

Using CSS,

like the following: http://gyazo.com/ff14a415cf7ac8622eb0cada3e23137f

I want to us CSS (preferably not CSS3) to get the edges and corners to have that effect, instead of just sharp egdes.

Answer 1

You can achieve this effect by using a box-shadow the same color as the div's background, like this:

.blur-box {
    background-color: #555;
    box-shadow: 0 0 5px 10px #555;
}

You can adjust the second and third arguments (5px and 10px here) to tweak the relative size and blur radius (respectively) of the shadow in order to get it the way you want, and this feature is well supported by modern browsers (see: http://caniuse.com/#feat=css-boxshadow).

Here's a jsFiddle demo: http://jsfiddle.net/bXAFt/