Creating a perfectly symmetrical circle using border-radius without specifying a height or width [duplicate]

Question

It appears setting my border-radius to either 50% or 100% didn't do the trick and gives the span tag a stretched appearance. Is it possible to get this circle perfectly symmetrical without setting a height or width to it?

span {
  background: #232323;
  border-radius: 50%;
  color: #fff;
  display: inline-block;
  font-family: Arial, sans-serif;
  padding: 6px;
}

<span>x</span>

Answer 1

A solution is to just set the width to the computed font height:

width: 1em;

span {
  background: #232323;
  border-radius: 50%;
  color: #fff;
  display: inline-block;
  padding: 6px;
  width: 1em;
  text-align: center;
}

<span>x</span>