Create shapes by styling the border radius

Learn how to create circular shapes from rounded corners to perfect circles and everything in between using the Border Radius property.

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!

You can create avrious shapes by styling the border and border radius of elements.

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.

 

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.

 

Browser support

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