在网页开发中，给视频元素添加圆角边框可以让页面视觉效果更柔和，适配不同的设计风格。不少开发者尝试直接给video标签设置border-radius却发现没有效果，这是因为video元素默认有特殊的渲染规则，需要配合其他属性才能实现预期效果。
基础实现方法
最直接的方式是给video元素同时设置border-radius和overflow属性，因为video元素默认的内容溢出不会隐藏，所以需要显式声明overflow为hidden，让超出圆角范围的内容被裁剪。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<style>
.rounded-video {
width: 600px;
height: 340px;
/* 设置圆角大小，数值越大圆角越明显 */
border-radius: 16px;
/* 隐藏超出圆角的内容 */
overflow: hidden;
/* 可选：添加边框样式 */
border: 2px solid #e0e0e0;
}
</style>
</head>
<body>
<video class="rounded-video" controls>
<source src="test.mp4" type="video/mp4">
您的浏览器不支持视频播放
</video>
</body>
</html>容器包裹实现方式
如果直接给video设置样式遇到兼容性问题，也可以用div容器包裹video元素，给容器设置圆角和overflow，video元素占满容器即可，这种方式兼容性更好。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<style>
.video-container {
width: 600px;
height: 340px;
border-radius: 16px;
overflow: hidden;
border: 2px solid #409eff;
}
.video-container video {
width: 100%;
height: 100%;
object-fit: cover;
}
</style>
</head>
<body>
<div class="video-container">
<video controls>
<source src="test.mp4" type="video/mp4">
您的浏览器不支持视频播放
</video>
</div>
</body>
</html>常见问题说明
- 如果设置了border-radius但看不到效果，首先检查是否添加了
overflow:hidden，video元素的默认渲染不会自动裁剪超出边界的内容。 - 如果需要给视频添加阴影效果，可以把阴影设置在容器或者video元素上，注意阴影不会受border-radius影响，会自然贴合圆角边缘。
- 当视频尺寸和容器尺寸不一致时，可以给video元素设置
object-fit:cover，避免视频拉伸变形，同时保持圆角效果正常。
不同圆角场景适配
如果需要设置单个角的圆角，可以单独指定border-radius的方向属性，比如只设置左上角和右上角为圆角：
.single-corner-video {
border-radius: 16px 16px 0 0;
overflow: hidden;
width: 600px;
height: 340px;
}如果需要圆形视频，只需要把border-radius设置为50%，同时保证容器的宽高一致即可。
HTML_videoCSS_border_radiusvideo_border_style前端样式设置修改时间：2026-05-29 22:05:06