border-radius失效问题

问题陈述：

用div做一个红点，之前的代码：

.redDott {
    width: 0.14rem;
    height: 0.14rem;
    line-height: 0.24rem;
    background-color: #f00;
    border-radius: 50%;
    margin-left: -0.2rem;
    margin-top: 0.12rem;
}

移动端效果图：

　　放大仔细看会发现，这个红点有点变形了，不是圆形了，而是有点椭圆了，是不是？
　　测试的时候，发现如果margin-top去掉，红点就不会变形，但是我想让这个红点居中，所以还是想要留住这个属性 。
　　百度了很多，然后借鉴了别人的方法，试了overflow:hidden;，也试了transform，还试了important提高样式层级，可是我的红点还是没有变 😦
　　但是，当我尝试着给他加一个边框时，竟然可以了！哈哈 😃

解决方法：

border: 0.02rem solid transparent;

如果你也遇到了同样的问题，希望这篇文章能够帮到你，当然，如果你有更好的方法，欢迎评论区赐教 ！！！