Borders

Learn how to define the radius of an element and create outlines on one or more sides of an element's boundary.

The UI in this lesson may seem different if you've enables the Style Panel Beta! This content will be updated soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!

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.

Radius

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 change the unit to any CSS unit from the unit dropdown.

Learn more about input values and units.

All corners

By default, setting a radius value will apply this value to all corners of the selected element. You can set a value by dragging the slider or typing a value into the input field. Using pixel values will give you uniform rounded corners. Using percentages will give you elliptical corners with the same aspect ratio.

Create various shapes by defining the corners of an element using the Border Radius property in Webflow

Individual corners

Alternatively, you can set different values on each corner to create unique shapes.

You can reset all four corners by typing 0 in the default radius input field. You can also apply the same unit to all radii from the unit dropdown of the default radius input field.

Borders

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, or in the case of elements with defined size, they'll push against the content inside. If you want to add a border effect without expanding an element’s dimensions, add an inside or outside box shadow with a blur of 0 instead.

Learn more about box shadows.

All sides

If you decide to style all sides concurrently, then switch to style only one of the sides, this will separate the settings for each side.

Individual sides

You can style individual sides. So, if you create and style a border on the top, that only affects the top. If you create and style a border on the left side, that only affects the left.

Style

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 selecting the border style: none.

Width

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.

Color

You can specify the color and opacity for any element’s border in border settings. If you change the color of only one side of the border, you will notice that the intersection results in a bevel or a picture frame effect.

Browser support

Can I Use ? Data on support for the feature across the major browsers from caniuse.com.