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

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