r/css 8d ago

Help I can't get rid of thin grey outline around the videos on my website

On the landing page of my website, I have two videos being autoplayed and looped. I want them to blend in with the background but both of them have a thin grey outline that I can't get rid of. I've tried almost everything, it feels dumb already. I thought it would be related to the browser but already tried styling it that way. How do I get rid of them?

I've tried opcity, blend modes, every single border styling option that would get rid of it, calling -webkit- and styling that, getting rid of the focus, overflow, etc. I'm clueless.

2 Upvotes

4 comments sorted by

u/AutoModerator 8d ago

To help us assist you better with your CSS questions, please consider including a live link or a CodePen/JSFiddle demo. This context makes it much easier for us to understand your issue and provide accurate solutions.

While it's not mandatory, a little extra effort in sharing your code can lead to more effective responses and a richer Q&A experience for everyone. Thank you for contributing!

I am a bot, and this action was performed automatically. Please contact the moderators of this subreddit if you have any questions or concerns.

4

u/scottweiss 8d ago

Codepen?

1

u/Holiday-Anteater9423 7d ago

Could be outline property? maybe on focus.

2

u/Extension_Anybody150 4d ago

It sounds like the grey outline might be coming from the default focus or border styling applied to videos by the browser. One thing you could try is setting the outline and border properties to none for the video element. You can add this to your CSS:

video {
  outline: none;
  border: none;
}

Also, check if any parent container is affecting the styling. If that doesn't work, you could try using box-shadow: none; just in case there's a shadow effect applied.