In Webflow, how can I remove the white outline between an image and its border when adjusting the image fit doesn't fix the issue?

Published on
September 22, 2023

To remove the white outline between an image and its border in Webflow, you can try the following steps:

  1. Inspect the element: Right-click on the image and select "Inspect" (or "Inspect Element") from the context menu. This will open the browser's developer tools.

  2. Identify the issue: In the developer tools, locate the CSS properties applied to the image. Look for properties like border, box-shadow, or any other styling that may be causing the white outline.

  3. Override the styling: Once you have identified the CSS properties causing the issue, you can override them with custom CSS. To do this in Webflow, follow these steps:

  • Open the Designer interface in Webflow.
  • Select the image element you want to modify.
  • Click on the "Settings" tab in the right sidebar.
  • Scroll down to the "Custom Code" section and click on the "Add Custom Code" button.
  • In the custom code area, add the appropriate CSS code to override the problematic styling. For example, if the issue is caused by a border, you can use the code border: none !important; to remove it.
  1. Preview and publish your changes: After adding the custom code, preview your site to ensure that the white outline has been successfully removed. If everything looks good, publish your changes and the white outline should no longer be visible.

By following these steps, you should be able to remove the white outline between an image and its border in Webflow.

Additional questions:

  1. How can I adjust the image fit in Webflow?
  2. Is it possible to modify CSS properties directly in Webflow?
  3. What other common image issues can occur in Webflow and how can I fix them?