filter: blur するとフチがぼやける対策

^これに

css

  img {
    -webkit-filter: blur(10px);
  }

^blurになるスタイルを当てると

^こうなる。フチまでブラーがかかってしまうため、このままだとちょっと使いづらい。

で、こうする。

html

<div>
  <img src="nekocyan.jpg" alt="" width="500" height=333">
</div>

imgをwrapperで包んで

css

  div {
    width: 500px;
    height: 333px;
    position: relative;
    overflow: hidden;
  }
  img {
    position: absolute;
    width: 520px;
    height: 353px;
    top: -10px;
    left: -10px;
  }

枠になるdivのサイズに元の画像サイズに指定し、overflow: hidden;に。
中のimgはblurのpxぶんだけ四方に伸ばす。(blurのpxの2倍を縦横に足す)
で、blurのpxぶんのネガティブマージンをとると

こんな感じにフチが綺麗なblur画像になる。

追記

コメント頂いたやり方のほうが全然スマートな方法でした。
コメント欄ご参照ください。