html - 如何将带有圆底角的边框顶部添加到元素？

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/>

需要添加到选中

border-top 6px 并且边框必须带有圆角底角。只有border-top必须出现，不移动

元素。
请帮助解决这个问题））

我附上了小草图来展示我需要的东西）

标签： htmlcss

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/>