HTML video标签设置border-radius圆角不生效，应如何解决？

方案1：直接给video标签设置圆角（兼容性最优） #

替换元素本身支持border-radius属性，直接给video添加样式即可，避免父级裁剪失效的问题：

video {
  border-radius: 20px;
  overflow: hidden;
  display: block; /* 清除默认行内元素的默认间距，避免裁剪错位 */
  /* 兼容老旧webkit内核浏览器可加以下属性 */
  -webkit-mask-image: radial-gradient(#fff, #000);
}

方案2：修复父级容器的裁剪逻辑 #

如果需要通过外层.rounded容器实现圆角，补充属性强制创建层叠上下文即可生效：

.rounded {
    border-radius: 20px;
    overflow: hidden;
    -webkit-transform: translateZ(0);
    margin-top: -43px;
    /* 新增属性 */
    width: 100%;
    isolation: isolate;
}

注意事项 #

• 不要同时给video和父级容器设置transform类属性，容易触发浏览器渲染bug导致圆角失效
• 优先选择直接给video加圆角的方案，所有现代浏览器均支持，实现逻辑更简单

内容的提问来源于stack exchange，提问作者zubair malik