What is the best way to implement CSS chat messages with rounded borders?

Question

What is the best way to implement CSS chat messages with rounded borders?

I am currently compiling a list of messages sent and received on our chat platform. Here is the current layout:

However, I would like to revamp this structure to something like the following:

I need guidance on how to update the design. Below are the CSS and HTML snippets I am working with:

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>

html css chat

Answer 1

Answer №1

Below is an example of how you can achieve this, make sure to read the comments within 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; /* apply 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>

Answer 2

Below is an example of how you can achieve this, make sure to read the comments within 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; /* apply 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>

What is the best way to implement CSS chat messages with rounded borders?

Answer №1

Similar questions

Is there a way to stop the top nav from covering the first element of the side-nav in specific situations?

Updating content with Ajax in Laravel

Transitioning to mobile-friendly web design

Is it possible to include a class in a .json object for use with CSS?

I am working with a JSON Object in JavaScript and need to retrieve a key using a String variable

What is the most efficient way to gather all form inputs and then transmit them to an email address?

Using flexbox auto margin within nested elements: A guide

Extract the <br /> tag exclusively from the content inside the div

Div element obstructing the ability to view markers

Ways to conceal a DIV element by clicking outside of it

Interactive vertical table headers and clickable cells

Adding text to a hyperlink when hovering over it

Adjust div to match the width of the image

Creating a fully responsive HTML page with a fullscreen image background

Is it possible to use the HTML script tag without specifying the type attribute as JavaScript? <script type="text/html"></script>?

Bootstrap collapsible panel with unique off-center design

Angular encountering a null value within a pre-existing nested object

Obtain information from a dataTable by utilizing ajax

Moving away from using Textarea, an alternative option is editable divisions. However, the issue arises when input

Steps to center the search form in the navbar and make it expand in Bootstrap 5