Are there any known solutions for fixing the issue of rounded corners and background videos going wrong when published in Webflow?

Published on
September 22, 2023

There can be instances where rounded corners and background videos can display incorrectly when published in Webflow. Fortunately, there are known solutions to fix these issues.

Rounded Corners Issue:

  1. Check the parent element: If the rounded corners are not being applied to an element, make sure the parent element does not have a border-radius or overflow set to hidden. This can override the rounded corners applied to the child element.
  2. Disable hardware acceleration: In some cases, hardware acceleration can cause issues with rounded corners. To fix this, go to the affected element's settings panel and scroll down to the Transform tab. Disable the "Hardware Acceleration" option.

Background Video Issue:

  1. Check the video source: Ensure that the video file you are using is in a compatible format (WebM, MP4, or OGG). Also, verify that the video file has been uploaded to the Webflow project correctly and that the video link is pointing to the correct file.
  2. Use a different hosting service: If you are experiencing issues with a third-party video hosting service, try using a different hosting service like YouTube or Vimeo. This can help eliminate any compatibility issues with the hosting platform.

To recap, here are the known solutions for fixing rounded corners and background video issues in Webflow:

  • Rounded Corners Issue: Check the parent element and disable hardware acceleration.
  • Background Video Issue: Check the video source and consider using a different hosting service.

Additional Questions:

  1. How can I add rounded corners to an element in Webflow?
  2. What are the compatible video formats for background videos in Webflow?
  3. Can I use an external video hosting service for background videos in Webflow?