Adding Border To Complex Shape

Hi! I am trying to create a timeline with the list section. I have it so that the cards are in a speech bubble shape and I would like it to be rounded and have a border around it. I have achieved this, however, the rounding and border is not wrapping around the entire shape. Is there a way I can accomplish that? Here is the code I'm using:

/*section the timeline is in*/
section[data-section-id="6401594d591d0d1f2e82e00f"]{
	/*cards*/
	.list-item{
		clip-path: polygon(0% 0%, 100% 0%, 100% 90%, 10% 90%, 0 100%);
		padding-bottom:4.5rem!important;
		background-color:#F1EFED;
		border:3px solid #656565;
		border-radius:20px;}
/*These are not related to the cards, but I am listing it in case it is relevant*/
	/*arrow shape*/
	.user-items-list-carousel__arrow-icon-path {
		stroke-width: 5px;
		stroke: #33bddd;}
	/*arrow background*/
	.user-items-list-carousel__arrow-icon-background-area {
		background: #F1EFED;
		opacity: 1!important;}
	/*arrow border*/
	.user-items-list-carousel__arrow-button {
		border:2px solid #656565;}
	/*line bubbles are sitting on*/
	.user-items-list-carousel__gutter{
		border-bottom:3px dashed #F1EFED;}}

Here is what it looks like:

The bottom doesn't have that border and isn't rounded like the rest of the shape. Does anyone know a way to achieve this? Thanks so much in advanced for the help!

website: https://www.yoloyoli.art/about

password: forum

It should be like this or?

12 hours ago, tuanphan said:

It should be like this or?

No, I like the speech bubble shape that I have. What I am looking for is the border and radius to extend around that speech bubble shape.