Use borders to define the radius of an element and create outlines on one or more sides of an element's boundary.
Borders define the radius of an element and create outlines on one or more sides of an element's boundary. You can define the border and radius of any selected element in the Style panel.
In this lesson:
Borders allow you to create outlines on one or more sides of an element's boundary. Borders take up space, expanding the dimensions of an element. In the case of elements with a defined size, borders will push against the content inside.
To add a border effect without expanding an element’s dimensions, add an inside or outside box shadow with a blur of 0.
Define the radius of all corners or individual corners of an element to create rounded corners.
By default, the radius is set in pixels (px). To use percentages, enter the percentage value and character (%) into any border input field. You can also use any CSS unit from the unit dropdown.
Learn more about input values and units.
The style property determines the kind of border that will surround an element. A border can be solid, dashed or dotted. You can even hide your border settings by setting the style to none.
Some built-in elements come with default borders, such as form input fields and block quotes. You can remove default borders by setting the border style to none.
The width determines the thickness of a border. This value can have any CSS unit from the list available in the unit dropdown.
Learn more about input values and units.
In the Style panel > Color, you can specify the color and opacity for any element’s border in border settings. If you change the color of one side of the border, you’ll get a bevel or a picture frame effect.
By default, setting an element's radius will apply the value to all corners. You can set a value by dragging the slider or typing a value into the input field.
Use pixel values to get rounded corners and percentages to get elliptical corners with the same aspect ratio.
For capsule shapes, set your radius to a pixel value that’s larger than half the element’s shortest dimension. A larger number like 500 usually works if you want to skip the calculations.
For ellipses, set the radius to 50%. Percentages base themselves on the width and height of an element
Note: When you have elements with different dimensions, ellipses can appear inconsistent.
For circles, set the radius to 50% and make sure the element width and height are the same.
You can set different values on each corner to create unique shapes.
To make a rectangular image circular without distorting it, you can use radius and object fit to place the image inside a Div block — here’s how:
In the Style panel > Borders, you can style all sides at once (by clicking in the middle) or individual sides.
If you create and style a border on the top, it only affects the top. If you create and style a border on the left, it only affects the left.
Bevels add depth to an image.
To add a bevel effect to a button, open the Style panel > Borders:
You have the power to style anything in the Style panel — let’s style a button to animate on hover.
To give your button rounded corners on hover:
To make the button return to its original state off hover and create a smooth transition:
To remove this animation:
To give your button rounded corners on click:
You can use the same steps above to add a transition and animate things like the border color or border width on hover or click. Have fun with it!
And be sure to check out our full course on animations with After Effects and Lottie.
Something went wrong while submitting the form. Please contact support@webflow.com
Got a lesson suggestion? Let us know
Need more help? Want to report a bug? Contact support
Have feedback on the feature? Submit feature feedback