.checklist > li.active {
border-top: 2px solid #0036ff;
border-bottom: 2px solid #0036ff;
border-radius: 0;
color: #000;
}
.checklist li.active:first-child,
.checklist li:not(.active) + li.active {
border-bottom-left-radius: 50px;
border-left: 2px solid #0036ff;
border-top-left-radius: 50px;
}
.checklist li.active:last-child,
.checklist li.right-side {
border-bottom-right-radius: 50px;
border-right: 2px solid #0036ff;
border-top-right-radius: 50px;
}
$('.checklist li').on('click', function(){
$(this).toggleClass('active');
$('.checklist li').removeClass('right-side').filter('.active').each(function(){
if (!$(this).next().hasClass('active')) {
$(this).addClass('right-side');
}
});
});
Пример
https://jsfiddle.net/wtcvhn2z/
8 строчек скрипта
