How do I add a border in Webflow?

Add the line in Borders

Select the element. Open Style panel, Borders. That section sets the radius, the style, the width, and the color. Style is the kind of line: solid, dashed, dotted, or none. Width is the thickness, in any unit from the unit menu. Color, including opacity, is in the same border settings.

None is how you remove a line. Form inputs and block quotes can arrive with a border already on. Set the style to none on that element if the line should disappear. You do not have to delete the element.

Example: a pricing card needs a 1px solid line in a quiet gray, on every side. Select the card, click the center of the border control so all four sides share the style, set solid, set the width to 1px, and pick the gray. Leave the radius at 0 if the corners should stay square.

Style one edge or all four

Click the center to change every side together. Click one side to change only that edge. A top border does not paint the left, and a left border does not paint the top.

A different color on one side is how a bevel or a simple frame starts. Webflow's button example is a border on all sides, then a second color and a different width on one side only. Use that when a card should show a colored bar on the left and a lighter line on the other three edges.

Give the class a name before you style the second card. The border is saved on the class, so the next card that uses the class gets the same line. A one-off change on a combo class is the combo class guide.

Round the corners in the same section

Radius is in Borders, not in a separate panel. The default unit is px. Type a percent, including the % character, when you want the corner to follow the element's size. Any unit in the unit menu is allowed.

Pixels make rounded rectangles. A larger pixel value, bigger than half the shorter side, moves the shape toward a capsule. Webflow notes that a large value such as 500px can skip the math when you want that capsule.

A radius of 50% makes an ellipse, because the percent uses the element's width and height. If those two sizes differ, the result looks like an oval, and two elements with different sizes will not match. A circle needs 50% and equal width and height.

Webflow's image example puts the photo in a Box, sets the Box to an equal width and height such as 400px, sets the radius to 50%, and sets overflow to hidden so the square corners of the photo disappear. The image is then 100% wide and 100% tall, with fit set to cover. The width and height guide is those two size fields.

Keep the outer size predictable

A border takes space. On an element with a set size, the line presses against the content inside. Webflow's default box sizing is border-box, so the width and height you typed already include the content, the padding, and the border. The outer box does not grow when you add the line, and the text has less room.

If you want an outline that does not use that inner space, add an inside or outside box shadow with a blur of 0. That is a shadow used as a line, and the box shadow guide is the distance, blur, and color. Use a real border when the line should be part of the box. Use the zero-blur shadow when the text must keep its full width.

Padding sits inside the border. If the words touch the line, add padding on the card. The line stays. The words move inward.

Change the border on hover

You can round a button only while the pointer is over it. Select the button, choose Hover in the states menu, and set a radius, such as 10px. Then choose None, open Effects, Transitions, and pick the border radius property so the corner eases back. The hover guide is the states menu and the transition.

The same path works for border color or border width on hover or on the Pressed state. To remove a hover radius, choose Hover and reset the radius.

A border on a card you already use is ordinary layout work. The membership is one plan for every existing Webflow site: $999 per month, including 10 hours of Webflow work. Additional work is $75 per hour and starts only after you approve a written estimate.