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

Question

I have menu

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

Need to add to selected

border-top 6px and the border must be with rounded bottom corners. Only border-top must appear, without moving

element.
Please help to solve this problem))

I attached small sketch to show what I need)

Answer 1

Use a pseudo element:

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