Why am I seeing a grey border around the container when I add it to my Webflow site, even though I have turned off the border settings in the styles?

Published on
September 22, 2023

If you're seeing a grey border around a container in your Webflow site, despite having turned off the border settings in the styles, there are a few possible reasons for this. Here are some steps you can take to troubleshoot and resolve the issue:

  1. Check parent elements: Borders applied to parent elements can trickle down and affect the child elements. Inspect the parent elements and ensure that they don't have any border settings enabled.

  2. Check for pseudo-elements: Pseudo-elements like ::before or ::after can add borders to elements. Inspect the styles of the element and its parent elements to see if any pseudo-elements are adding the border.

  3. Override default styles: Webflow might have default styles applied to its elements that you need to override. In the Styles panel, click on the target element and navigate through the states. Ensure that none of the states have border settings enabled.

  4. Inspect custom code: If you've added any custom code to your project, it's possible that the border is being added via CSS applied externally. Use the browser's developer tools to inspect the element and look for any external stylesheets or custom code that might be affecting the border.

  5. Cache issues: Clear your browser's cache and then reload your Webflow site. Sometimes, cached stylesheets or scripts can cause display issues, including unexpected borders.

If none of these steps resolve the issue, it would be helpful to provide more information about your specific setup and share your Webflow project with the Webflow community or support team for further assistance.

Additional Questions:

  1. How do I remove a border from a container in Webflow?
  2. Why is my container overflowing despite having enough space?
  3. How can I add custom code in Webflow to modify my site's appearance?