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

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

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

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

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

html
1<footer>
2      <div class="footermenue">
3        <ul>
4          <li>お知らせnote</li>
5          <li>FAQ</li>
6          <li>プライバシーポリシー</li>
7          <li>利用規約</li>
8          <li>特定商取引に関する表記</li>
9          <li>運営会社</li>
10        </ul>
11      <div class="icon-insta">
12        <a href="https://www.instagram.com/flowr_is/" class="btn btn-insta"></a>
13      </div>
14
15      </div>
16         Copyright ROLLCAKE Inc. All Rights Reserved.
17
18    </footer>
19
20      </body>

css
1
2.footer{
3	width: 100vw;
4	height: 50vh;
5	background-color: #3F434A;
6	text-align: center;
7}
8
9.footermenue{
10	color: #fff;
11}
12.footermenue ul{
13	list-style: none;
14	display: flex;
15	justify-content: space-around;
16}
17.btn{
18	width: 64px;
19    height: 64px;
20	background-image: url(../images/insta.jpg);
21	background-color: #3F434A;
22	background-size: cover;
23	border-radius: 50%;
24	padding: 0;
25	
26}

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

![お手本](a3650530e77b0fa6ccd3ccb8a2f4a8c0.jpeg)

宜しくお願い致します。

行動規範の内容に同意します

回答1件

ベストアンサー

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

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