html

Rounded Borders in CSS

The borders in CSS have a key role in shaping the element. By default, the border in CSS has corners/edges. However, CSS allows you to have the rounded shape of the borders.  The border-radius property of CSS enables to change of a simple border to rounded borders. This article provides a demonstration to provide following learning outcomes:

  • how the border radius works
  • how to get the rounded borders in CSS

How to get rounded borders in CSS

The rounded borders are backed up by the border-radius property of the CSS. We will first look at the working of border-radius property and then will provide some examples.

How border-radius works

The border-radius property is the shorthand property that comprises of the properties stated below:

border-top-left-radius, border-top-right-radius, border-left-bottom-radius, and border-right-bottom-radius.

Primarily the working of border-radius depends on the following syntax:

{border-radius: value;}

As the border-radius property is a shorthand property of four child properties thus it can accept more than value. If you want to have a different radius for various borders, then you may choose one of the following possibilities.

round all the borders with the same size

{border-radius: value;}

Round top-left/bottom-right and top-right/bottom-left to same size

{border-radius: value1 value2;}

Round top-left, top-right, and bottom-right borders

{border-radius: value1 value2 value3;}

If you want to get rounded borders with different sizes

{border-radius: value1 value2 value3 value4;}

The upcoming examples are practiced using the syntax provided above.

Example 1: Getting the rounded borders

The code provided below is executed to get the rounded borders

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title> Rounded Borders </title>
</head>
<style type="text/css">
    .one{
        /* rounding all borders to 20px */
        border-radius: 20px;
        border-style: solid;
    }
    .two{
        /* rounding top-left/bottom-right and top-right/bottom-left */
        border-radius: 25px 25px;
        border-style: solid;
    }
    .three{
        /* rounding top-left, top-right, and bottom-right */
        border-radius: 30px 30px 30px;
        border-style: solid;
    }
    .four{
        /* rounding all borders with different measurements */
        border-radius: 20px 25px 30px 15px;
        border-style: solid;
    }
</style>
<body>
    <p class="one"> Welcome to Linuxhint </p>
    <p class="two"> Valey of tech  </p>
    <p class="three"> Guides on HTML </p>
    <p class="four"> Guides on CSS </p>
</body>
</html>

The code is described as,

  • inside <style> tag, dour classes are made named “one”, “two”, “three”, and “four”
  • “one” class will round all the borders to 20px,
  • the “two” class will round the top-left/bottom-right and top-right/bottom-left borders to 25px and 25px.
  • the “three” class rounds three border top-left, top-right, and bottom-right
  • the dour class will round all the borders to different sizes
  •  inside the <body> tag, four paragraphs are declared that show the usage of the four CSS classes mentioned in the <style> tag

The image of the code is provided below

The image of the output on the web page shown below:

Example 2: Get the rounded border of choice

The above example rounds off the borders in the pre-defined order. For instance, if you use one value with border-radius property all the borders would be rounded, similarly, if three values are provided the bottom-left border will not be rounded.

Let’s say, we do not want to round off the bottom-right border. In such situations, you have to use four values and use 0px in place of the bottom-right border. The following code is used to practice the on choice rounded border example:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title> Rounded borders </title>
</head>
<style type="text/css">
    p{
        border-radius: 100px 100px 0px 100px;
        border-style: solid;
    }
</style>
<body>
    <p> Welcome to Linuxhint </p>
</body>
</html>

The above code is described as:

  • the border-radius property is defined in the style tag where the 0px is used to skip the rounding the bottom-right border
  • border-style is used for better visibility
  • in body, a paragraph is written on which the rounded border is being used

The image of the code editor is displayed below:

Output

After going through this, you would have learned the working of border radius and its associated properties in various scenarios.

Conclusion

The border-radius property facilitates in getting the rounded borders in CSS. The border-radius is the short-hand property and contains functionalities of four properties in it. This article demonstrates the possible ways to get the rounded borders in CSS. To do this, we have presented the working of border-radius property in CSS. Moreover, for better understanding, we have also demonstrated several examples to get you to the rounded borders in CSS using border-radius property.

About the author

Adnan Shabbir