How to add border-radius before specific class of for chat UI

Home / Uncategorized / How to add border-radius before specific class of for chat UI

Question:
I’m trying to implement chat bubble CSS from this answer, the problem is I don’t know how to give border-bottom-left-radius to the first third message by other user and border-bottom-right-radius to the fourth message by this user. Please run this code snippet to understand what I’m saying. Thanks in advance.

.chat-ul{
list-style: none;
margin: 0;
padding: 0;
}

.chat-ul .chat-li{
display:inline-block;
clear: both;
padding: 20px;
border-radius: 30px;
margin-bottom: 2px;
font-family: Helvetica, Arial, sans-serif;
}

.incoming {
background: #eee;
float: left;
}

.outgoing{
float: right;
background: #0084ff;
color: #fff;
}

.incoming:first-child{
border-bottom-left-radius: 5px;
}

.outgoing:first-child{
border-bottom-right-radius: 5px;
}

.incoming + .outgoing{
border-bottom-right-radius: 5px;
}

.outgoing + .outgoing{
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}

.outgoing:last-of-type {
border-bottom-right-radius: 30px;
}

.outgoing + .incoming{
border-bottom-left-radius: 5px;
}

.incoming + .incoming{
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}

.incoming:last-of-type {
border-bottom-left-radius: 30px;
}

  • By Other User, first message
  • By Other User, second message
  • By Other User, third message
  • By this User, first message
  • By this User, secondmessage
  • By this User, third message
  • By this User, fourth message
  • By Other User, first message
  • By Other User, second message
  • By Other User, third message

Answer:
I think the solution is more simple then you think. First, if you want to have this a flexible as possible put each "user-chat-item-history" in a separate

    with the class for .outgoing or .incoming. Therefore you need less CSS and the whole script is way more maintainable:

    .chat-ul{
    list-style: none;
    margin: 0;
    padding: 0;
    }

    .chat-ul .chat-li {
    display:inline-block;
    clear: both;
    padding: 20px;
    margin-bottom: 2px;
    font-family: Helvetica, Arial, sans-serif;
    }

    .incoming .chat-li {
    background: #eee;
    float: left;
    border-radius: 5px 30px 30px 5px;
    }

    .outgoing .chat-li{
    float: right;
    background: #0084ff;
    color: #fff;
    border-radius: 30px 5px 5px 30px;
    }

    .incoming .chat-li:first-child {
    border-top-left-radius: 30px;
    }

    .incoming .chat-li:last-child {
    border-bottom-left-radius: 30px;
    }

    .outgoing .chat-li:first-child {
    border-top-right-radius: 30px;
    }

    .outgoing .chat-li:last-child {
    border-bottom-right-radius: 30px;
    }

    • By Other User, first message
    • By Other User, second message
    • By Other User, third message
    • By this User, first message
    • By this User, secondmessage
    • By this User, third message
    • By this User, fourth message
    • By Other User, first message
    • By Other User, second message
    • By Other User, third message

    Read more

Leave a Reply

Your email address will not be published. Required fields are marked *