画像を丸形にして、周りの白い部分を消したい。

Question

画像を丸形にして、周りの白い部分を消したい。
丸にすることはできたのですが、周りの白色部分が消せません。
paddingでもmarginでもなくおそらく要素内の白色の部分になると思います。

そもそも、「画像を丸形にして、周りの白い部分を消したい。」はできないのでしょうか？

調べても、形を丸にする方法までしか無いです。
透過率を変えても要素全体が薄くなってできませんでした。
padding,marginを0にしても、ダメでした。

模写しています。（フッターの部分）
参考サイト
参考サイトはこちら

<footer>
      <div class="footermenue">
        <ul>
          <li>お知らせnote</li>
          <li>FAQ</li>
          <li>プライバシーポリシー</li>
          <li>利用規約</li>
          <li>特定商取引に関する表記</li>
          <li>運営会社</li>
        </ul>
      <div class="icon-insta">
        <a href="https://www.instagram.com/flowr_is/" class="btn btn-insta"></a>
      </div>

      </div>
         Copyright ROLLCAKE Inc. All Rights Reserved.

    </footer>

      </body>

.footer{
	width: 100vw;
	height: 50vh;
	background-color: #3F434A;
	text-align: center;
}

.footermenue{
	color: #fff;
}
.footermenue ul{
	list-style: none;
	display: flex;
	justify-content: space-around;
}
.btn{
	width: 64px;
    height: 64px;
	background-image: url(../images/insta.jpg);
	background-color: #3F434A;
	background-size: cover;
	border-radius: 50%;
	padding: 0;
	
}

![直したいところ](38ec850a07b01d12a3571da10eccf56e.jpeg)

![お手本](a3650530e77b0fa6ccd3ccb8a2f4a8c0.jpeg)

宜しくお願い致します。

Answer 1

こちらでいかがでしょうか?

.btn{
    width: 64px;
    height: 64px;
    background-image: url(../images/insta.jpg);
    background-color: #3F434A;
    /* background-size: cover; */
    border-radius: 50%;
    padding: 0;
  
    /* 追加 */
    display: block; /* 不要かもしれません */
    background-position: center center;
    background-size: 80px; /* こちらの数字を調整して余白をなくしてください */
}