css
  1. css-border-radius

CSS Border Radius

  • The border-radius property in CSS is used to add rounded corners to an element.
  • This property is especially useful for creating visual interest and improving the overall look and feel of your website or web application.

Syntax

The border-radius property has four values that define the radius of each corner of an element in the following order:

border-radius: top-left top-right bottom-right bottom-left;

You can also use the shorthand version of the border-radius property to set the same value for all corners:

border-radius: 10px;

Or, you can specify the values for only two or three corners:

border-radius: 10px 5px 20px;

Example

Here's an example of applying the border-radius property to a div element:

div {
  border-radius: 30px 50px 20px 10px;
}
Try Playground

Explanation

In the above example, the border-radius property is applied to a div element. The top-left corner will have a radius of 30 pixels, the top-right corner will have a radius of 50 pixels, the bottom-right corner will have a radius of 20 pixels, and the bottom-left corner will have a radius of 10 pixels.

Use

The border-radius property is used to add a curve or roundness to the edges of an element. It's commonly used to soften the appearance of rectangular shapes, such as buttons, images, and containers.

Important Points

  • The border-radius property is not supported in some older versions of browsers.
  • When using the shorthand version of border-radius, order matters: the first value sets the top-left and bottom-right corners, and the second value sets the top-right and bottom-left corners.
  • If you only specify one value for border-radius, it applies to all four corners.

Summary

The border-radius property in CSS is a powerful tool for adding rounded corners to your designs. Whether you're working with buttons, images, or containers, border-radius can help you achieve a visually interesting and polished look and feel. Remember to experiment with different values and combinations of values to get the look you're after!

Published on: