CSS圆角border-radius

图中间的那个圆角用css怎么实现,是banner图下边的圆弧

.hasbr {
width: 200px;
height: 40px;
line-height: 40px;
border-radius: 20px;
text-align: center;
background-color: #0bf933;
}

要我做这样的页，我可以

<style>
        .banner{
            width: 100%;
            padding-bottom: 30px;
            position: relative;
            overflow: hidden;
        }
        .banner:after{
            content: "";
            display: block;
            width: 3000px;
            height: 3000px;
            position: absolute;
            background: url(背景图路径) repeat center bottom/30%;
            left: 50%;
            margin-left: -1500px;
            border-bottom: 0;
            border-radius: 100%;
        }
    </style>

<div class="banner">
    <p>邀请好友<br/>里面文字自己排版</p>
</div>

我大体的想法就是做个半径超大的园，就形成了弧度，其他三边通过溢出隐藏不允许显示就做到了