Shape Design using Border Radii

You have the ability to form various shapes by adjusting the border and border radii of elements.

Rounded Box

If you utilize values starting from 1px and increasing up to the Radius property, you will end up with a rounded rectangle.

By increasing the pixel value for the radius, you will gradually reach a capsule-like shape.

Capsule/Pill Shape

The capsule shape’s radius is half the height or width value of the element in pixels. Further increments in values won’t change the shape.

Ellipse

You can employ percentage values for the Radius. A radius of 50% will present a smooth rendering of an ellipse. Greater values won’t affect the shape.

The ellipse’s shape is directly linked to the element’s width. The ellipse’s aspect ratio is determined by the ratio of its width to height.

Circle

A circle is essentially an ellipse with equal width and height. To craft a circle, apply a radius of 50% to any element with identical width and height measurements.

Dynamic Corners

Similar to any other element, you can customize the Border Radius for various states.

1. Access the Hover state and introduce a Border Radius
2. Switch to the default None state and apply a Transition to the Border Radius property. Adjust or maintain the duration and easing

Explore additional information about States and Transitions on elements.