Borders can define edges or create outlines on one or more sides of an element's boundary. 

 
In this lesson
  • Adding a border
  • Sides of a border
  • Style, width and color of a border
  • Border stylings in different states

Adding a border

Border styles can be found in the Border section in the Style Panel. Add a new class or just add border styles and a class will automatically created for you.

Webflow Border Styling Panel

Sides of a border

Borders take up space, expanding the dimensions of an element, or in the case of elements with defined dimensions, 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.

Styling 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.

 

Styling 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.

 

Removing styles

You can clear border properties by clicking None to remove the style, or by holding Option or Alt on the keyboard and clicking the blue indicator.

 
Pro tip
Some built-in elements come with default borders, like the form input fields and blockquotes. You can remove default borders by selecting the border style: none (X). Read about border styles in the next section.

Style, width, and color

Style - the style of a border determines the kind of the border. A border can be Solid, Dashed or Dotted. You can even hide your border settings by setting the style to None.

Width - The width determines the thickness of a border.

 

Color - You can add any color to an element's border. You can even specify opacity. If you change the color of one of the sides only, you will notice that the intersection gives us a bevel or a picture frame effect.

 

Creating shapes by styling sides differently

When you add an element onto your page, you can see that it has perpendicular edges. It’s either rectangular or square shaped. You can change the shape of any element by changing the shape of its border. You can play with the width and color of individual sides of a border to create various shapes like triangles and trapezoids. The trick is to use transparent border color for some of the sides.

Creating shapes by styling borders in Webflow

You can also create circular shapes using Border Radius.

Border stylings in different states

You can change how a border looks in different States. By modifying the border in the hover state, for example, you will see the border change on hover.

 

When setting states, the transition from one state to another can be smoothed out by setting a Transition on the element. To set a transition:

  1. Go to None/default state
  2. Add a Transition
  3. Choose transition property: border
  4. Alter or keep the duration and easing. 200ms is great.

Common styling mistake

When a hover state has a border but the none/default state doesn’t, hovering over the element will cause the content around to shift. It’s important to have the same border width for all states to avoid shifting content.