CSS Tutorial

CSS Border Radius

The CSS border-radius property allows you to create rounded corners for elements. It can be applied to all HTML elements, including images and divs. This property can be used to achieve circular or elliptical shapes as well. Cascading Style Sheets (CSS) is a useful asset for web engineers, permitting them to style and design web pages with artfulness. One of the key properties that add to the visual allure of components is border-radius. This flexible property permits you to make adjusted corners for borders, adding a bit of polish to your design. How about we dig into the complexities of border-radius and investigate its different applications.

Key Points on CSS Border Radius:

The border-radius property defines the radius of an element's corners.
It can take one to four values, depending on how you want to apply the radius to each corner.
A single value will apply the same radius to all four corners.
Two values can be used to specify horizontal and vertical radii for elliptical corners.
Use border-radius: 50% to create a perfect circle or oval when applied to square or rectangular elements.
Negative values for border-radius are not allowed, as they would cause the element's corners to collapse.

Property	Description
border-top-left-radius	It is used to set the border-radius for the top-left corner.
border-top-right-radius	It is used to set the border-radius for the top-right corner.
border-bottom-right-radius	It is used to set the border-radius for the bottom-right corner.
border-bottom-left-radius	It is used to set the border-radius for the bottom-left corner.

Syntax for CSS Border Radius:

Syntax Example


        /* Border radius shorthand syntax */
        .border-radius: top-left top-right bottom-right bottom-left;
        
        /* Example */
        .border-radius: 10px 20px 30px 40px;

Examples of CSS Border Radius:

The following examples demonstrate the usage of different border-radius values:

Code Example: Single Value Border Radius


            .div {
            border-radius: 15px;
            border: 2px solid black;
            padding: 20px;
                 }

Output

This div has rounded corners with a radius of 15px.

Code Example: Two Values Border Radius


            .div {
            border-radius: 20px 50px;
                 }

Output

This div has elliptical rounded corners.

Code Example: Four Values Border Radius


        .div {
        border-radius: 10px 20px 30px 40px;
             }

Output

This div has different rounded corners for each side.

Code Example: Circular Border Radius


            .div {
            border-radius: 50%;
                 }

Output

50% border radius.

Common Border Radius Properties:

border-radius: Defines the radius of all corners. You can specify one, two, three, or four values for the radius.
border-top-left-radius: Defines the radius of the top-left corner.
border-top-right-radius: Defines the radius of the top-right corner.
border-bottom-left-radius: Defines the radius of the bottom-left corner.
border-bottom-right-radius: Defines the radius of the bottom-right corner.

The border-radius property is a great tool for enhancing the visual design of elements. Be sure to use it carefully to avoid creating too many sharp or exaggerated corners that could detract from the overall layout of your page.