CSS border-radius Property

Last Updated : 02 Apr, 2024

CSS border radius is used to round the corners of the outer border edges of an element. This property can contain one, two, three, or four values. The border-radius property is used to set the border-radius. This property is not applicable to the table elements when border-collapse is collapsing.

Try It:

Rounded Corners

Circle

Elliptical Shape

Pill Shape

Rounded Top Corners

Rounded Bottom Corners

Complex Shapes

Currently Active Property:

border-radius: 10px;

Syntax:

border-radius: 1-4 length|% / 1-4 length|%|initial|inherit;

Property Values:

length: It represents the shape of the corners & the default value is 0.
percentage(%): It represents the shape of the corners in %.
initial: It is used to set an element’s CSS property to its default value.
inherit: It is used to inherit a property to an element from its parent element property value.

Shorthands:

Apply Radius value to all four corners:

border-radius: value;

Apply value1 to top-left and bottom-right corners and value2 to top-right and bottom-left corners:

border-radius: value1 value2;

Apply value1 to top-left corner, value2 to top-right and bottom-left corners and value3 to bottom-right corner:

border-radius: value1 value2 value3;

Apply value1 to top-left corner, value2 to top-right corner , value3 to bottom-right corner and value4 to bottom-left corner:

border-radius: value1 value2 value3 value4;

The 4 values for each radius can be specified in the following order as top-left, top-right, bottom-right, bottom-left. If the bottom-left is removed then it will be the same as the top-right. Similarly, If the bottom-right & top-right will be removed then it will be the same as the top-left & the top-left respectively.

CSS Border Radius Examples

border-radius: 35px; sets the border-radius of each corner. It is the combination of four properties: border-top-left-radius, border-top-right-radius, border-bottom-left-radius, and border-bottom-right-radius. It sets all corners to the same value.

Example 1: This example illustrates the border-radius property whose value is specified by the single value.

HTML

<!DOCTYPE html>
<html>
  
<head>
    <title>Rounded Corners</title>
    <style>
        .GFG {
            border-radius: 35px;
            background: #009900;
            padding: 30px;
            text-align: center;
            width: 300px;
            height: 120px;
        }
    </style>
</head>

<body>
    <div class="GFG">
        <h2>GeeksforGeeks</h2>
        <p>border-radius: 35px;</p>
    </div>
</body>
  
</html>

Output:

border-radius

border-radius: 20px 40px; sets first value as top-left and bottom right corner and second value as top right and bottom left corners.

Example 2: This example illustrates the border-radius property whose value is specified by the double values.

HTML

<!DOCTYPE html>
<html>
  
<head>
    <title>Rounded Corners</title>
    <style>
        .GFG {
            border-radius: 20px 40px;
            background: #009900;
            padding: 30px;
            text-align: center;
            width: 300px;
            height: 120px;
        }
    </style>
</head>

<body>
    <div class="GFG">
        <h2>GeeksforGeeks</h2>
        <p>border-radius: 20px 40px;</p>
    </div>
</body>
  
</html>

Output:

border-radius-two -value

border-top-left-radius: This property is used to specify the radius of the top left corner of an element.

Example 3: This example illustrates the border-radius property where the property value is applied for the top left corner of an element.

HTML

<!DOCTYPE html>
<html>
  
<head>
    <title>Rounded Corners</title>
    <style>
        .GFG {
            border-top-left-radius: 35px;
            background: #009900;
            padding: 30px;
            text-align: center;
            width: 300px;
            height: 120px;
        }
    </style>
</head>

<body>
    <div class="GFG">
        <h2>GeeksforGeeks</h2>
        <p>border-top-left-radius: 35px;</p>
    </div>
</body>
  
</html>