如何在Safari中解决边框半径问题？

Question

边框将应用于视频，但是视频不完全位于边框内。我如何在边框内安装它？该问题仅在Safari中出现。我添加了一个链接以使其更清晰地显示。

Safari then 2nd is Chrome

下面是CSS。

   .video-div
 {  
     justify-content: center;
 }

 video {
     overflow: hidden;
     height: 100%;
     width: auto;
     border: 6px white solid;
     border-radius: 50px;
     position: absolute;
     right: 50%;
     left: 50%;
     transform: translateX(-50%);
 }

谢谢！

Answer 1

我认为您可以从这里获得解决方案：

Rounded cornes (border radius) Safari issue

html:
<div class="activity_rounded"><img src="http://placehold.it/100" /></div>

css: 

.activity_rounded {
    display: inline-block;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    -khtml-border-radius: 50%;
    border: 3px solid #fff;
}

.activity_rounded img  {
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    -khtml-border-radius: 50%;
    vertical-align: middle;
}