Html “转到顶部”按钮上的Bootstrap 4中字体上的圆形

在我的页面底部，我使用了一个带有字体图标的滚动到顶部按钮。向上箭头具有边框为50%的背景色和悬停色。我到处搜索，有50%的人应该做一个圆形，但在这种情况下有些东西阻止了它。我想要一个简单的圆圈背景颜色的图标

我的代码

#滚动{
显示：无；
位置：固定；
底部：20px；
右：30px；
z指数：99；
边界：无；
大纲：无；
背景色：#5F9EA0；
颜色：白色；
文本对齐：居中；
光标：指针；
填充：15倍；
边界半径：50%；
不透明度：.6；
}
#滚动：悬停{
颜色：#004289；
背景色：#FFE466；
}

//当用户从文档顶部向下滚动20px时，显示按钮
window.onscroll=function（）{scrollFunction（）}；
函数滚动函数（）{
if（document.body.scrollTop>20 | | document.documentElement.scrollTop>20）{
document.getElementById（“滚动”）.style.display=“块”；
}否则{
document.getElementById（“滚动”）.style.display=“无”；
}
}
//当用户单击按钮时，滚动至文档顶部
函数topFunction（）{
document.body.scrollTop=0；
document.documentElement.scrollTop=0；
}

使按钮呈方形：

#Scroll {
  height: 40px;
  width: 40px;
}

---

尝试以下css按钮：

#Scroll {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 30px;
    z-index: 99;
    border: none;
    outline: none;
    background-color: #5F9EA0;
    color: white;
    text-align: center;
    cursor: pointer;
    opacity: .6;

    /* add this */        
    width: 50px;
    height: 50px;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    border-radius: 25px;

}

---

边界半径：50%

不会神奇地形成一个圆，而是一个椭圆。您必须确保元素的高度和宽度也相等。谢谢，尽管它不能完全与此配合使用，所以我将其更改为高度：3.25rem；宽度：3.25雷姆；这就是我现在想要的样子