如何將帶有圓底角的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/>