html5 video element 1px white bottom border on chrome

Question

For some reason on Chrome, I get a white bottom border at the bottom of my video container element.

<video id="cover" src="video.mp4" autoplay="" loop=""></video>

Does anyone know how to fix this?

This is the computed styles for the video element.

background-color:rgb(0, 0, 0);
border-bottom-color:rgb(0, 0, 0);
border-bottom-style:none;
border-bottom-width:0px;
border-image-outset:0px;
border-image-repeat:stretch;
border-image-slice:100%;
border-image-source:none;
border-image-width:1;
border-left-color:rgb(0, 0, 0);
border-left-style:none;
border-left-width:0px;
border-right-color:rgb(0, 0, 0);
border-right-style:none;
border-right-width:0px;
border-top-color:rgb(0, 0, 0);
border-top-style:none;
border-top-width:0px;
display:inline-block;
font-family:Times;
font-size:16px;
font-stretch:normal;
font-style:normal;
font-variant-caps:normal;
font-variant-ligatures:normal;
font-variant-numeric:normal;
font-weight:normal;
height:798.547px;
line-height:16px;
margin-bottom:0px;
margin-left:0px;
margin-right:0px;
margin-top:0px;
object-fit:contain;
opacity:1;
padding-bottom:0px;
padding-left:0px;
padding-right:0px;
padding-top:0px;
vertical-align:baseline;
width:1680px;

@Petar-Krešimir yes, i've edited to show my computed style. How bout not down voting me until you try putting a video in a html5 element using chrome. — bryan, Nov 04 '16 at 21:59

score 1 · Answer 1 · answered Feb 22 '19 at 13:25

1

A bit late to the party, but here is a small and simple hack which worked for me:

video {
  margin-bottom: -1px;
}

answered Feb 22 '19 at 13:25

borisdiakur

10,387
7
68
100

score 1 · Answer 2 · answered Jun 29 '20 at 10:26

1

For me, the problem turned out to be an outline. Setting it to none solved it:

video {
   outline: none;
}

answered Jun 29 '20 at 10:26

skrebbel

9,841
6
35
34

score 1 · Answer 3 · answered Jul 01 '22 at 09:19

1

this worked for me

video {
clip-path: inset(1px 1px);
}

Found it here https://stackoverflow.com/a/70374846/19459083

Credit to @timbari

answered Jul 01 '22 at 09:19

jonathan bennett

11
1

score 0 · Answer 4 · answered May 20 '19 at 13:10

0

In my case it was line-height. I set it to 0 and this "border bottom" disappeared.

answered May 20 '19 at 13:10

pawelbylina

1,387
10
17

score 0 · Answer 5 · answered Dec 14 '21 at 16:48

0

The fix, for reasons I cannot explain, is adding a "display: block;" to your .

answered Dec 14 '21 at 16:48

János

32,867
38
193
353

score -1 · Answer 6 · answered Oct 05 '19 at 18:00

-1

In my case, the problem was box-sizing. Just added

-webkit-box-sizing: unset;
-moz-box-sizing: unset;
box-sizing: unset;

to the parent container and the border disappear.

answered Oct 05 '19 at 18:00

Bogdan Nicovski

89
2
10

score -1 · Answer 7 · edited Aug 21 '21 at 04:45

-1

I accidentaly fixed this by applying a border radius on the video element.

video { border-radius:1px; }

edited Aug 21 '21 at 04:45

Jean-François Fabre

137,073
23
153
219

answered Aug 20 '21 at 22:37

babgev

344
2
8

html5 video element 1px white bottom border on chrome

7 Answers7