Синие углы, которые не будут отклоняться go при использовании радиуса границы

Question

Хорошо, у меня есть три ссылки на социальные сети в нижней части моей веб-страницы, и у них есть эти синие углы, которые не исчезнут go.

Вот мой код для этого:

.hd-footer-22-main ul.social.footer li a {
  color: #fff;
  border: 0.5px solid #fff;
  border-color: rgb(255, 255, 255);
  border-radius: 18px;
  -webkit-border-radius: 18px;
  -moz-border-radius: 18px;
  -o-border-radius: 18px;
  -ms-border-radius: 18px;
} 

.hd-footer-22-main ul.social.footer li a {
  color: #fff;
  display: inline-block;
  width: 32px;
  height: 32px;
  background-color: #1d1d1d;
  text-align: center;
}

.hd-footer-22-main ul.social.footer li, #bottomfacebook 
a:hover {
  background: blue;
  transition: 0.3s ease;
}

.hd-footer-22-main ul.social.footer li, #bottominstagram 
 a:hover {
  background: rgb(255, 0, 149);
  transition: 0.3s ease;
}

.hd-footer-22-main ul.social.footer li, #bottomtwitter 
a:hover {
  background: var(--blue);
  transition: 0.3s ease;
}

Это мой html:

<ul class="social footer">
    <li id="bottomfacebook"><a href=""> 
    <span class="fa fa-facebook" aria-hidden="true"></span></a></li>

    <li id="bottominstagram"><a href=""><span class="fa fa-instagram" aria-hidden="true"></span></a> 
    </li>

    <li id="bottomtwitter"><a href=""><span class="fa fa-twitter" aria-hidden="true"></span></a></li>
</ul>

Я не знаю если это происходит из-за того, что я использую значки fa fa, я проверил код цвета этих синих углов в моем css, но не смог найти ничего такого же, что и этот цвет, так что это как-то связано с указанным c собственность, которую я дал своим тегам в социальных сетях.

Answer 1

Хм, а какой браузер вы используете? Я не могу повторить это с Firefox 74 здесь.

.hd-footer-22-main {
  --blue: midnightblue;
}

.hd-footer-22-main ul.social.footer li {
  list-style: none;
  display: inline-block;
}

.hd-footer-22-main ul.social.footer li a {
  color: #fff;
  border: 0.5px solid #fff;
  border-color: rgb(255, 255, 255);
  border-radius: 18px;
  -webkit-border-radius: 18px;
  -moz-border-radius: 18px;
  -o-border-radius: 18px;
  -ms-border-radius: 18px;
}

.hd-footer-22-main ul.social.footer li a {
  color: #fff;
  display: inline-block;
  width: 32px;
  height: 32px;
  background-color: #1d1d1d;
  text-align: center;
}

.hd-footer-22-main ul.social.footer li,
#bottomfacebook a:hover {
  background: blue;
  transition: 0.3s ease;
}

.hd-footer-22-main ul.social.footer li,
#bottominstagram a:hover {
  background: rgb(255, 0, 149);
  transition: 0.3s ease;
}

.hd-footer-22-main ul.social.footer li,
#bottomtwitter a:hover {
  background: var(--blue);
  transition: 0.3s ease;
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="hd-footer-22-main">
  <ul class="social footer">
    <li id="bottomfacebook">
      <a href="">
        <span class="fa fa-facebook" aria-hidden="true"></span></a>
    </li>

    <li id="bottominstagram"><a href=""><span class="fa fa-instagram" aria-hidden="true"></span></a>
    </li>

    <li id="bottomtwitter"><a href=""><span class="fa fa-twitter" aria-hidden="true"></span></a></li>
  </ul>
</div>

Редактировать: Обновлено CSS согласно моему комментарию.