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;

Gossip

Have you tried overriding it with border: none;? – Leclerc

@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. – Gossip

Answer 1

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

video {
  margin-bottom: -1px;
}

Receptor

Answer 2

this worked for me

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

Found it here https://mcmap.net/q/555854/-video-player-shows-black-border

Credit to @timbari

Doucette

Answer 3

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

video {
   outline: none;
}

Flybynight

Answer 4

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

Multiped

Answer 5

Try this:

video {
   clip-path: fill-box;
}

Boot

Answer 6

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

Danadanae

Answer 7

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

video { border-radius:1px; }

Septilateral

Answer 8

In my case combination of @badgev @Roee Yossef answers solve my problem

video { 
   clip-path: fill-box;
   border-radius:1px; 
}

Ewens

Answer 9

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.

Lontson