请检查解决方案：
现场演示：https://jsfiddle.net/webx/2g5bydyo/

.selectWrapper{
  border-radius:36px;
  display:inline-block;
  overflow:hidden;
  background:#cccccc;
  border:1px solid #cccccc;
}
.selectBox{
  width:140px;
  height:40px;
  border:0px;
  outline:none;
}

<div class="selectWrapper">
  <select class="selectBox">
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
  <option>Option 4</option>
</select>
</div>

这是我的解决方案。

CSS

.selectBox{border-radius:4px;border:1px solid #AAAAAA;}

HTML

<select class="selectBox">
.............
</select>

当然，下拉列表是由用户操作系统控制的，所以这些元素的完整样式是不可能的。为了达到你想要的外观，你可能希望考虑开发，或使用third-party custom drop-down list。
从看你的小提琴; Demo 5由Hugo Giraidel可能会为您提供您正在寻找的。

基本上，它使用HTML <li>元素，然后使用JS/jQuery创建下拉列表效果和一些基本的过渡效果。

你看过这篇Stackoverflow的文章吗？
CSS - Border Radius for the drop down box when using the SELECT tag? Not the SELECT input ittself, the actual drop down box?
因为你所要求的是不可能的（或者至少不兼容跨浏览器）
要使其工作并使其跨浏览器兼容，您必须使用DIV元素（或任何非表单元素）创建下拉列表/选择，并使用JS/jQuery将其值更新为隐藏的选择。这样，您就可以按照您想要的方式设计DIV，而没有任何限制。
这可能会帮助你：
JQuery自动完成替代选择下拉列表

我不知道为什么，但它的作品时，删除选择默认箭头

select {
  /* for Firefox */
  -moz-appearance: none;
  /* for Chrome */
  -webkit-appearance: none;
}

select::-ms-expand {
  /* For IE10 */
  display: none;
}

select {
  border-radius: 20px;
  width: 100px;
  height: 40px;
  padding-right: 10px;
  padding-left: 10px;
}

尝试outline: none;然后添加您的边框的东西...事实上，对每个要更改的参数使用desired_parameter: none;，然后更改它

select {
        outline: none;
        background-color: none;
        background-color: rgba(244,241,229,1.00);
        font-weight: 500;
        padding: 3px 0px 3px 3px;
        margin: 5px 1px 3px 0px;
        border: none;
        border: 1px solid #DDDDDD;
        border-radius: 4px;
}