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

Question

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

Answer 1

.test{
  width:100px;
  height:50px; 
  background-color:#fff;
  border-radius:50px 50px 0 0; 
  border:2px solid #666;
  border-bottom:none;
}

<div class="test"></div>

Answer 2

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

Answer 3

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