Confide CSS Blur Filter into Bounds

I recently came across an issue with filter:blur in CSS. Lets say our page has a nice Koala image that looks like this:

HTML:
<div class="imageContainer">
<img src="koala.jpg">
</div>

CSS:

.imageContainer {
    border: solid 5px black;
    width: 1024px;
    height: 768px;
    }

Result:

Now, lets apply a nice dose of Blur effect on it:

img {
+filter: blur(30px);
}

• Note: + stands for vendor prefix

Result:

Watch how the image exceeds the border of its container, and a "glowing" effect appears between the blurred image and the black border! Eww!

Solution:

.imageContainer {
overflow: hidden;
}    
img {
+transform:scale(1.1);
}

Result:

The blurred image now resides peacefully within its bounds. YEY :)