How can I remove the one-pixel black line around my background video in Webflow?

Published on
September 22, 2023

To remove the one-pixel black line around your background video in Webflow, you can follow these steps:

  1. Select the section or element containing the background video. This could be a Div Block or a Section element.
  2. In the Element Styles panel on the right side, scroll down to the Box Shadows section.
  3. Locate the Box Shadows option for the element. By default, there will be a 1px black shadow applied to the element.
  4. Click on the X icon next to the Box Shadows option to remove the shadow.
  5. Preview your website to see if the black line has been removed. If it still persists, there might be other styling or settings interfering with it.
  6. If the black line is still visible, you can try adjusting the padding or margins of the element to ensure there is no overlap with adjacent elements that might be causing the line.

Note: Removing the box shadow will also remove any other box shadows applied to the element. If you want to preserve other box shadows, you can use custom CSS to target the specific element and remove only the one-pixel black line.

In some cases, the black line might be caused by the video itself, particularly if it has a black border or if it's not perfectly centered within its container. In such cases, you might need to edit the video externally to remove the black border or ensure that it's centered.

Additional Resources:

Three additional questions:

  1. How do I add a background video in Webflow?
  2. How can I apply custom CSS to a specific element in Webflow?
  3. Is it possible to adjust the position or size of a background video in Webflow?