CSS blur, borders blend with background

Question

When I add a blur (CSS) to my image, and put it in a div, to keep straight borders, the image blends with the other elements:

My code is: https://drive.google.com/file/d/0B2t-Ql_mj7hRU0NHZkpDbHZPWWM/edit?usp=sharing

How can I have straight borders, without blending?
I only have this issue with Google Chrome

Answer 1

If you are referring to it adopting the color behind it, then you would need to provide it with a background-color, but if you just want it to be a square instead then try this edit of your original code: http://jsfiddle.net/Incredulous/6V9ua/

I've removed your duplicate CSS for the img selector and added a px to the end of your -20. Your CSS now looks like this:

body{
    background:red;
    text-align:center;
    }
img{
    -webkit-filter: blur(20px); 
    -moz-filter: blur(20px); 
    filter: blur(20px);
    margin:-20px;
    }
div{
    overflow:hidden;
    display:table;
    background-color:white;
    }

I added the display:table; to make your div fit the content inside it and the background-color:white; to remove the bleeding of the red on the edges.