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

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，并且边框的底角必须为圆角。 仅边框顶部必须出现，不能移动

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

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

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