CSS border-radius：20px

我想将border-radius设置为div.Blur div半径看起来像这样。我该如何解决？谢谢。

<div class="content" style="background-image:url('img/2.jpg');"><br>
<div class="caption"><br>
<div class="blur">/div> <br>
<h1>Click/h1><br>
</div> <br>
</div><br>

图片预览在这里（编辑）

CodePen示例在这里

.content
{
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    border: 20px solid #25a9e6;
}
.caption
{
    cursor: pointer;
    position: absolute;
    opacity: 0;<br>
    -webkit-transition: all 0.20s ease-in-out;
    -moz-transition: all 0.20s ease-in-out;
    -o-transition: all 0.20s ease-in-out;
    -ms-transition: all 0.20s ease-in-out;
    transition: all 0.20s ease-in-out;
    height:100%;
}
.blur
{
    background-color: rgba(0,0,0,0.7);
    /*background-color: rgba(7, 194, 209, 0.75);*/
    width: 210px;
    height: 210px;
    z-index: 5;
    position: absolute;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
}