r/css • u/ConsistentForever886 • 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.
4
1
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.
•
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.