JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li><a href="#">Text text</a></li>
    <li><a href="#">Text text</a></li>
    <li><a href="#">Text text</a></li>
</ul>

CSS

ul {overflow: hidden; border: 1px solid black;
-moz-border-radius-topleft: 15px;
-moz-border-radius-topright: 15px;
-webkit-border-radius:15px;       
}
li {float: left; height:40px;}
li:first-child, li:last-child {background: red; border: 1px solid grey;
padding: 0 10px; 
-moz-border-radius-topleft: 15px;
-moz-border-radius-topright: 15px;
-webkit-border-radius:15px;       
    
}
li:hover {background: yellow;}