From rounded corners to perfect circles and everything in between, Border Radius gives you control over each corner of an element.

Webflow Border Radius

Defining a Radius

To define the Border Radius for any selected element follow these steps:

  1. Go to the Styles Panel
  2. Scroll to the Border section
  3. Add a Border Radius value
 
Border radius isn’t adjustable for Video elements.

Defining corner shape

When defining the corners of an element, regardless of whether the element is a rectangle or a perfect square, the cornering will be circular.

[fig.01.1 - Border Radius]

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

Here, we’ll cover how to create the following shapes using the Border Radius property:

  • Rounded rectangle
  • Capsule (pill) shape
  • Ellipse
  • Circle
  • Nonuniform shapes

Rounded Rectangle

Adding any value from 1px and up to the Radius property will create a rounded rectangle.

 

As you increase the pixel value for the radius, you start to approach the capsule shape.

Capsule/Pill

The capsule shape has a radius that is equivalent to half the height or width value of the element in pixels. Higher values will have no impact on the shape.

 

Ellipse

You can use percentage values for the Radius. A radius of 50% will have a smooth rendering of an ellipse. Higher values will have no impact on the shape.

 

The shape of the ellipse is directly correlated with the width of the element. The aspect ratio of the ellipse is based on the relationship between its width and height.

Circle

A circle is an ellipse that has the same width and height. So, to create a circle, add a radius of 50% to any element with equal width and height values.

 

Styling individual corners

You can create other shapes by styling individual corners of an element. Just Select a corner and add a radius value to affect just that corner.

 

Percentage values vs Pixel values

Corners don't need to match. You can create really odd shapes by using combinations of pixel values and percentage values.

 

By default, the radius is set in pixels. You can switch to using percentages by clicking on the unit (px) in the Radius field or by typing in the percentage character (%). Using pixels will give you uniform rounded corners. Using percentages will give you elliptical corners with the same aspect ratio.

Styling individual corners of an element using pixel or percentage values for the Border Radius property in Webflow
Styling individual corners of an element using pixel or percentage values for the Border Radius property

Animated Corners

As with any other element, you can style the Border Radius for different states.

  1. Go to the Hover state and add a border Radius
  2. Go to the default None state and add a Transition for the Border Radius property. Alter or keep the duration and easing

Learn more about States and Transitions on elements.