JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li>Text</li>
    <li>Text</li>
    <li>Text</li>
</ul>

CSS

ul {
    border-radius: 10px;
    overflow: hidden;
    background: #ddd;
    list-style:none;
    width:150px;
}
ul li {
    background:  #f00;
}

JavaScript

// giving radious to first ans last lis

$('li:first').css('border-radius', '0 10px 0 0');
$('li:last').css('border-radius', '0 0 10px 0');

// a sample animation
$('li:first, li:last').fadeOut(1000, function() {
   $(this).fadeIn(1000);
});