How to do CSS chat messages border radius?

Question

I'm making a list of incoming and outgoing messages for the chat platform. I have such a list.

View preview

I want to do something like.

View preview

I want to change this structure. how do i do this. This is my codes.

ul {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

ul li {
  padding: 5px 10px;
  display: block;
  color: white;
  background: #444;
  height: 30px;
  list-style-type: none;
}

ul li.out {
  background: cornflowerblue;
}

<ul>
  <li class="out">1</li>
  <li>2</li>
  <li>3</li>
  <li class="out">4</li>
  <li class="out">5</li>
  <li>6</li>
  <li class="out">7</li>
  <li>8</li>
  <li>9</li>
  <li>10</li>
  <li class="out">11</li>
</ul>

Answer 1

You can do it like below, check the comments in the code:

ul {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

ul li.out {
  background: cornflowerblue;
}
ul li {
  padding: 5px 10px;
  position:relative;
  z-index:0;
  color: white;
  background: #444;
  height: 30px;
  list-style-type: none;
  border-radius:10px; /* border radius to all */
}

/* remove top radius if the next one is the same*/
.out + .out,
:not(.out) + :not(.out) {
  border-radius:0 0 10px 10px;
}
/* create a pseudo element to overlap the bottom radius of the previous one */
.out + .out:after,
:not(.out) + :not(.out):after {  
  content:"";
  position:absolute;
  z-index:-1;
  background:inherit;
  left:0;
  right:0;
  height:10px;
  bottom:calc(100% + 10px);
}

<ul>
  <li class="out">1</li>
  <li>2</li>
  <li>3</li>
  <li class="out">4</li>
  <li class="out">5</li>
  <li>6</li>
  <li class="out">7</li>
  <li>8</li>
  <li>9</li>
  <li>10</li>
  <li class="out">11</li>
</ul>