CSS border-radius Property

CSS border-radius property is used to define the round corners for the element's border. For example,

h1 {
    border-radius: 12px;
}
CSS Border Radius Example

Here, the border-radius property rounds the border of the h1 element to 12px.


CSS border-radius Syntax

The syntax of the border-radius property is as follows,

border-radius: value | initial | inherit;

Here,

  • value: specifies the radius of the border in units such as px, pt, em, %, etc
  • initial: sets the property value to 0 (default value)
  • inherit: inherits the property value from its parent element

Example: CSS border-radius Example

Let's see an example of the border-radius property,

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="style.css" />
        <title>CSS border-radius</title>
    </head>

    <body>
        <p class="border-radius-4px">border-radius: 4px;</p>
        <p class="border-radius-12px">border-radius: 8px;</p>
        <p class="border-radius-percentage">border-radius: 20%;</p>
    </body>
</html>
/* common styles for all p */
p {
    border: 6px solid black;
    padding: 12px;
    background-color: skyblue;
}

p.border-radius-4px {
    border-radius: 4px;
}

p.border-radius-12px {
    border-radius: 12px;
}

p.border-radius-percentage {
    border-radius: 20%;
}

Browser Output

CSS Border Radius Example

The above example illustrates how border-radius works with different values.


Circular Shape Using border-radius Property

The border-radius property creates a circular shape when the specified value is half of the element's height and width. For example,

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="style.css" />
        <title>CSS border-radius</title>
    </head>

    <body>
        <h2>border-radius: 150px;</h2>
        <div></div>
    </body>
</html>
div {
    width: 150px;
    height: 150px;
    background-color: skyblue;
    border: 8px solid black;

    /* radius value is half of width and height */
    border-radius: 150px; /* equivalent to 50% */
}

Browser Output

CSS Border Radius Circle Example

Note: If the element's height and width are not equal then the circle will not be created.


Elliptical shape using border-radius Property

The border-radius property takes two values to create an elliptical shape. The two values represent the horizontal and vertical radius respectively.

Let's see an example,

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="style.css" />
        <title>CSS border-radius</title>
    </head>

    <body>
        <h2>border-radius: 50% / 45%;</h2>
        <div></div>
    </body>

</html>
/* styles all div */
div {
    width: 300px;
    height: 150px;
    background-color: skyblue;
    border: 8px solid black;
 
   /* horizontal-radius | vertical-radius */
    border-radius: 50% / 45%;
}

Browser Output

CSS Border Radius Ellipse Example

Note: The horizontal and vertical radius values must be separated with a forward slash (/), otherwise the property will work as shorthand property to round the diagonal corners of the border.


CSS border-radius Property as a Shorthand

The border-radius property can be used as a shorthand to specify the radius of all four corners of the border. For example,

<!DOCTYPE html>
<html lang="en">
   
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="style.css" />
        <title>CSS border-radius</title>
    </head>

    <body>
        <p>border-radius: 12px;</p>
        <div class="one-value"></div>

        <p>border-radius: 18px 30px;</p>
        <div class="two-value"></div>

        <p>border-radius: 12px 20px 4px;</p>
        <div class="three-value"></div>

        <p>border-radius: 12px 16px 8px 20px;</p>
        <div class="four-value"></div>
    </body>

</html>
/* styles all div */
div {
    width: 80px;
    height: 60px;
    background-color: skyblue;
    border: 4px solid black;
}

div.one-value {
    /* applies to all corners */
    border-radius: 12px;
}

div.two-value {
    /* first value: top-left and bottom-right corner radius
    second value: top-right and bottom-left corner radius*/
    border-radius: 18px 30px;
}

div.three-value {
    /* first value: top-left corner radius
    second value: top-right and bottom-left corner radius
    third value: bottom-right corner radius */
    border-radius: 12px 20px 4px;
}

div.four-value {
    /* top-left radius | top-right radius | bottom-right radius | bottom-left radius */
    border-radius: 12px 16px 28px 20px;
}

Browser Output

CSS Border Radius Shorthand Example

The above example illustrates how the border-radius value can be used as shorthand to create the border radius of individual corners of an element's border.


CSS border-radius constituent properties

CSS border-top-left-radius Property

The border-top-left-radius property is used to add the radius to the top left corner of the element's border. For example,

div {
    border-top-left-radius: 20px;
}

Browser Output

CSS Border Top Left Radius Example
CSS border-top-right-radius Property

The border-top-right-radius property is used to add the radius to the top right corner of the element's border. For example,

div {
    border-top-right-radius: 20px;
}

Browser Output

CSS Border Top Right Radius Example
CSS border-bottom-right-radius Property

The border-bottom-right-radius property is used to add the radius to the bottom right corner of the element's border. For example,

div {
    border-bottom-right-radius: 20px;
}

Browser Output

CSS Border Bottom Right Radius Example
CSS border-bottom-left-radius Property

The border-bottom-left-radius property is used to add the radius to the bottom left corner of the element's border. For example,

div {
    border-bottom-left-radius: 20px;
}

Browser Output

CSS Border Bottom Left Radius Example

Our premium learning platform, created with over a decade of experience and thousands of feedbacks.

Learn and improve your coding skills like never before.

Try Programiz PRO
  • Interactive Courses
  • Certificates
  • AI Help
  • 2000+ Challenges