How to Add a Border Radius to an Image in Webflow
In this article
This guide will show you how to apply a border radius to an image in Webflow, allowing you to create rounded corners for your visuals. Follow these steps to customize the appearance of your images.
Explore more Webflow tutorials with interactive Saltfish walkthroughs.
Here's how to add a border radius to an image in Webflow
- Select Your Image
Begin by clicking on the image element directly on your Webflow design canvas. This action will highlight the image and display its properties in the right sidebar.
- Navigate to the Style Tab
In the right-hand sidebar, locate and click on the "Style" tab. This tab contains all the visual styling options for your selected element.
- Expand the Borders Section
Within the Style panel, scroll down until you find the "Borders" section. Click on its header to expand it and reveal the border-related properties.
- Locate the Radius Input
Inside the expanded Borders section, find the "Radius" input field. This control allows you to define the curvature of the image's corners.
- Set the Border Radius Value
Click into the Radius input field and type in your desired value, such as "20px". The image corners will immediately update to reflect the new radius.
Your turn to show how it works.
Build a walkthrough of your product with Saltfish, then share it with your customers.
Frequently Asked Questions
The Style tab is located in the right-hand sidebar, typically next to the "Settings" and "Interactions" tabs.
Webflow
