Circle border-radius not working

HTML-CSS
1

I am trying to make my border-radius a circle but all I get are ellipses.

<nav class="links">
				<ul>
					<li class=><a href="#">Facebook</a></li>
					<li><a href="#">GitHub</a></li>
					<li><a href="#">Send a mail</a></li>
					<li><a href="#">Call me</a></li>
				</ul>
			</nav>

.links a {
	background: #FFF;
	border: 2px solid #FFAAAA;
	text-decoration: none;
	border-radius: 50%;
	color: var(--light2);
	font-family: "Open Sans", sans-serif;
	font-size: 1rem;
	padding: 1rem;
	margin: 0 2rem;
	width: 3rem;
}

.links li {
	display: inline-block;
}
2

If you use border-radius 50%, you should get a circle ONLY IF your image or your div is a perfect square.

3

Also, remember that the a element is display inline by default so you can’t set a width or height.

.links a {
  background: #FFF;
  border: 2px solid #FFAAAA;
  text-decoration: none;
  border-radius: 50%;
  color: var(--light2);
  font-family: "Open Sans", sans-serif;
  font-size: 1rem;
  padding: 1rem;
  margin: 0 2rem;
  
  display: block;
  width: 6rem;
  height: 6rem;
  text-align: center;
  line-height: 6rem;
}

Or flexbox for centering

.links a {
  background: #FFF;
  border: 2px solid #FFAAAA;
  text-decoration: none;
  border-radius: 50%;
  color: var(--light2);
  font-family: "Open Sans", sans-serif;
  font-size: 1rem;
  padding: 1rem;
  margin: 0 2rem;
  
  display: flex;
  align-items: center;
  justify-content: center;
  width: 6rem;
  height: 6rem;
}