Question

I am trying to blur an image using CSS. I’m usig "blur" but I’m finding this also blurs the border. Is there a way to keep the border straight but blur the rest of the image?

http://www.inserthtml.com/2012/06/css-filters/

css

filter: filter(value);
-webkit-filter: filter(value);
-moz-filter: filter(value);
-o-filter: filter(value);
-ms-filter: filter(value);

Answer 1

Try something like this:

HTML:

<div id="container">
   <img id="image" src="http://upload.wikimedia.org/wikipedia/commons/thumb/1/1e/Benz-velo.jpg/220px-Benz-velo.jpg">
</div>​

CSS:

#image{
   filter: blur(5px);
   -webkit-filter: blur(5px);
   -moz-filter: blur(5px);
   -o-filter: blur(5px);
   -ms-filter: blur(5px);

   margin:-1px;
   padding:1px;
}

#container{
   width:222px;
   height:179px;
   overflow:hidden;
}

The margin on the image seems to be required for some reason (at least in Chrome).

Also on jsfiddle: http://jsfiddle.net/jdwire/HUaBV/1/.