border-radius

border-radius is a CSS property used to style the corners of an element into rounded shapes. It accepts values in pixels, percentages, or em units.

Basic Usage

To apply a rounded corner to all four corners of an element, you can use a single value:

.element {
  border-radius: 20px;
}

This will create rounded corners with a radius of 20 pixels on all sides.

Customizing Corners

To customize the radius for individual corners, you can specify four values:

.element {
  border-radius: top-left top-right bottom-right bottom-left;
}

For example, to create rounded corners only on the top left and bottom right, you would use:

.element {
  border-radius: 20px 0 0 20px;
}

Elliptical Corners

To create elliptical corners, you can specify two values for each corner:

.element {
  border-radius: top-left-horizontal top-left-vertical top-right-horizontal top-right-vertical
               bottom-right-horizontal bottom-right-vertical bottom-left-horizontal bottom-left-vertical;
}

For example, to create an elliptical corner on the top left with a horizontal radius of 20 pixels and a vertical radius of 10 pixels, you would use:

.element {
  border-radius: 20px 10px 0 0;
}

Percentage Values

Using percentage values for border-radius can create more flexible and responsive designs:

.element {
  border-radius: 50%;
}

This will create fully circular corners, as 50% of the element’s width or height (whichever is smaller) is used for the radius.

Note: When using percentage values, the element’s width and height should be defined to ensure consistent results.