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>