如何在<li>元素上添加带有圆底角的border-top？

Question

我有菜单

ul{
  list-style-type:none;
}
li{  
  float:left;
  padding:5px;
  border:1px solid black;
}
.selected{
  border-top:6px solid blue;
}

<ul>
     <li class="selected">Home</li>
     <li>Gallery</li>
     <li>About</li>
<ul/>

需要添加到选定的

边框顶部6像素，并且边框的底角必须为圆角。只能移动无边框

元素。
请帮助解决此问题））

我附上了一个小草图以展示我的需求

Answer 1

使用伪元素：

ul{
  list-style-type:none;
}
li{  
  float:left;
  padding:5px;
  border:1px solid black;
  position:relative;
}
.selected:before{
  content:"";
  position:absolute;
  top:0;
  height:6px;
  right:0;
  left:0;
  border-radius: 0 0 10px 10px;
  background:blue;
}

<ul>
     <li class="selected">Home</li>
     <li>Gallery</li>
     <li>About</li>
<ul/>