CSS: Character inside a round element

Question

I need to create an element (span, possibly) that will contain a character (initial letter of name) and that element needs to have rounded corners.

I managed to do it in a precarious way, 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.

Answer 1

.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>

Answer 2

.borderRadiu{
    border-radius: 5em;
    background: #660000;
    padding: 5px 10px;
    color: #fff;
}

<span class="borderRadiu">S</span>