<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title></title>
    <script>

    </script>
    <style>
        /*  'mask-image-slice' without 'fill' clips inner content area away.
            'clip' clips evyerthing outside of rect() away.
            If filter wouldn't be applyed first in the chain, you either see
            blured background in the 'fill' area, or outsite the 'clip' area. */
        div {
            width: 350px;
            height: 350px;
            background-color: red;
            position: absolute;
          	-webkit-mask-box-image-slice: 75;
          	-webkit-mask-box-image-repeat: stretch;
          	-webkit-mask-box-image-source: url(resources/mask.png);
            clip: rect(76px, 274px, 274px, 76px);
          	-webkit-filter: blur(20px);
        }
    </style>
</head>
<body>
<div></div>
</body>
</html>