I need to create an element (span, possibly) that will contain a character (initial letter of the name) and this element must have the rounded corners.
I was able to do it precariously, because depending on the letter, the shape of the element is no longer an exact round. What is the best way to do this?
Below is an example of what I need.
I need to create an element (span, possibly) that will contain a character (initial letter of the name) and this element must have the rounded corners.
I was able to do it precariously, because depending on the letter, the shape of the element is no longer an exact round. What is the best way to do this?
Below is an example of what I need.
.circle
{
width:50px;
height:50px;
border-radius:25px;
font-size:25px;
color:#fff;
line-height:50px;
text-align:center;
background:#580000
}<div class="circle">S</div>
.borderRadiu{
border-radius: 5em;
background: #660000;
padding: 5px 10px;
color: #fff;
}<span class="borderRadiu">S</span>