how to make div "more round"

January 31, 2022

I need to make my div look like picture, I tried to change border-radius, but it doesn’t help. It’s only become more round along the side edges, but not on top and bottom

  <div *ngIf="message.type === 'appeal'" class="first-message">
        <span class="chat-open" > 
<span class="chat-open-text" >Чат открыт</span>
 <span>{{message.date| date: 'dd.MM.yyyy HH:mm'}}</span> </span>
     </div> 

.first-message {
    
  margin-top: 10%;
  margin-bottom: 10%;
  display: block;
  text-align: center;
  overflow: hidden;
  white-space: nowrap;
    
.chat-open-text{
  border-radius: 10%;
  padding: 15px;
  background-color: #F03E3E;
  color: white;
  margin-right: 5% ;
}

>Solution :

You have to add display : inline-flex to your span, and set border-radius to 25px and it will work

  <div *ngIf="message.type === 'appeal'" class="first-message">
        <span class="chat-open" > 
<span class="chat-open-text" >Чат открыт</span>
 <span>{{message.date| date: 'dd.MM.yyyy HH:mm'}}</span> </span>
     </div>

.first-message {
    
  margin-top: 10%;
  margin-bottom: 10%;
  display: block;
  text-align: center;
  overflow: hidden;
  white-space: nowrap;
 }   
.chat-open-text {
 border-radius: 25px;
    background-color: #F03E3E !important;
    color: white;
    margin-right: 5%;
    padding: 10px 30px;
    display: inline-flex;
  
}