Listelenen ögelerde border-radius problemi

Merhabalar,

Sohbet platformu için gelen giden mesaj listesi yapıyorum. Benim şöyle bir listem var.

Bu yapının şöyle olmasını istiyorum.

Kodlarım bunlar. Bu yapı üzerinden bu tasarımı çıkarmak istiyorum. Yoksa farklı yöntemlerle de yapılabilir ama ben tek liste olsun istiyorum.

<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>

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;
}

Şimdiden teşekkür ediyorum.

HTML yapına uygun CSS class'ları ile çözüm üretebilirsin tek liste içinde.

Eğer liste dinamik geliyorsa class isimlerini dinamik şekilde if koşulları ile ekletip / çıkartman gerekebilir

HTML kodların;

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

CSS kodların;

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;
}

/* Border Radius Top Left and Right */
.brtlr {
	border-top-left-radius: 12px;
	border-top-right-radius: 12px;
}

/* Border Radius Bottom Left and Right */
.brblr {
	border-bottom-left-radius: 12px;
	border-bottom-right-radius: 12px;
}

/* Border Radius Full */

.rounded {
	border-radius: 12px;
}