CSS半圆边框样式求指教，不用图片实现

Question

由于要做响应式处理所以不能用图片，求CSS高手指教下这种突起半圆、该如何实现呀？

Answer 1

.test{&nbsp; width:100px;&nbsp; height:50px;&nbsp;&nbsp; background-color:#fff;&nbsp; border-radius:50px 50px 0 0;&nbsp;&nbsp; border:2px solid #666;&nbsp; border-bottom:none;}<div class="test"></div>

Answer 2

border-radius: 100px 100px 0 0;&nbsp;height: 50px;&nbsp;background-color: #fff;border: 3px solid #999;

Answer 3

利用伪类加一个绝对定位的半圆遮罩显示在当前位置。