Shaping Elements with Border Radius

Shaping elements with border radius is a very useful tool for rounded corners and other custom shapes. With WebbsAI’s basic input fields, you can create a variety of different shapes that make your website look more vibrant.

Basic Usage

At Styles > Borders, you can manipulate either all corners or only individual corners based on your requirement. With Style, Width, and Color, you can decide how your border looks on your website.

Individual Corner Radius

You can specify individual radii for each corner by selecting Radius > Individual Corners.

This creates a custom shape where each corner has a different radius.

Rounded Rectangles

By default, any container is always a rectangle or a square. A rounded triangle can be made by setting the Radius property to any value greater than 0 px. As you increase the Radius, the element becomes more rounded.

Ellipses and Circles

Through percentages, you can create ellipses or circles.

By setting the Radius property to 50%, you can create an ellipse for your element.

A circle is just an ellipse with an equal width and height.

Pills and Capsules

The pill or 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.

Complex Shapes

You can also combine different radius values to create more complex shapes. This helps make shapes like speech bubbles or arrows.