Create shapes by styling the border radius
Create circular shapes from rounded corners to perfect circles and everything in between using the Border Radius property.
You can create various 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.
- Go to the Hover state and add a border Radius
- 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.