圆形 CSS 边框看起来像素化

Question

我需要一些帮助来修复我的圆形边框。它看起来很丑陋。我希望它更流畅，但无论如何我似乎无法修复它。我不知道我做错了什么。

这是它的图片：

这是我的 HTML：

 <div class="sidebar">
    <!-- User avatar/message/notification/settings buttons -->
    <div class="userpanel">
        <div class="userpanel-image">
            <img src="image.jpg">
        </div>
        <div class="userpanel-buttons">
            <ul>
                <li><a href="#"><span class="glyphicon glyphicon-envelope"></span></a></li>
                <li><a href="#"><span class="glyphicon glyphicon-bell"></span></a></li>
                <li><a href="#"><span class="glyphicon glyphicon-cog"></span></a></li>
            </ul>
        </div>
    </div>
</div>

这是我的CSS：

 .sidebar > .userpanel > .userpanel-image img {
    border: 1px solid white;
    border-radius: 25px;
    margin: 3px;
    margin-right: 25px;
}

原文由 Tibia Rook 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

对我来说，这看起来最好：

 .userpanel-image {
  width: 100px;
  height: 100px;
  border-radius: 100%;
  box-shadow: 0 0 1px 1px white;
  overflow: hidden;
}

.userpanel-image img {
  width: 98px;
  height: 98px;
}

原文由 nischtname 发布，翻译遵循 CC BY-SA 4.0 许可协议