how to make div "more round"-CodePudding

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'" >
        <span  > 
<span  >Чат открыт</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% ;
}

CodePudding user response：

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'" >
        <span  > 
<span  >Чат открыт</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;
  
}

CodePudding user response：

Try setting the border-radius of the .chat-open-text as a value in pixels instead of as a percentage.

If you want the pill shape as in the image, set the border-radius to be half the height of the <span >...</span>.

CodePudding user response：

you can use border-radius property.
https://www.w3schools.com/cssref/css3_pr_border-radius.asp (Reference link)