自定义视频组件以具有边框半径

Question

目前我正在尝试让我的视频组件看起来像这样，其中有彩色边框和边框半径：

我试过在我的 <video> 标签中添加 border-radius="10px" 但它没有显示在网页中。我也试过让它的父 class 有一个 border-radius 但仍然没有改变。

<div className="border">
         <video width="100%" height="100%" border-radius="10px" controls >
          <source src="PassportVid.mp4" type="video/mp4"/>
         </video>
</div>

CSS:

.border{
 border-radius="10px";
 border: 1px solid orange;
}

我的结果：

Answer 1

也许试试这样的东西。

video{
width:100%;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
overflow:hidden;
border: 1px solid orange;

}

Answer 2

现在你可以输入以下代码吗：

**CSS:**
div{border-radius:20px;height: 300px; overflow: hidden;width: 300px;}
video{width: 100%; height: 100%;object-fit: cover;}

**HTML**
<div>
 <video width="320" height="240" controls src="movie.ogg" >
   Your browser does not support the video tag.
 </video>

自定义视频组件以具有边框半径

Customizing Video component to have border radius

html

css

video