Border Radius in CSS | Rounded Borders, Example

The border radius in CSS is a shorthand property that is used to create rounder corners on any HTML element. This property creates round corners on an element’s outer border edge.

We can apply it to any HTML element that has a visible border, background, or both. The value of the border-radius property sets the size of the radius in pixels.

The general syntax to define border-radius property in CSS to create rounder corners is as:

Selector {
    border-radius: <value>;
}

You can specify <value> in various units like pixels (px), percentages (%), em, etc. This shorthand property sets all four corners of an element’s border in one line, rather than having to specify each corner separately.

Let’s take an example in which we will create a uniform border radius for all four corners of an HTML element.

Example 1:

<!DOCTYPE html>
<html>
<head>
    <title>Uniform Border Radius Example</title>
<style>
div {
   width: 200px;
   height: 200px;
   background-color: lightblue;
   border: 2px solid blue;
   border-radius: 10px; /* Uniform border radius */
   padding:10px;
}
</style>
</head>
<body>
     <div>Uniform border radius across all the four corners of a div element.</div>
</body>
</html>

Output:

An example of uniform border radius example in CSS.

In this example, we have provided a single value to the border-radius property. Therefore, it applies the same radius to all four corners of the div element. However, the border-radius property can also take two, three, or four values to round the corners. Let’s understand it.

CSS Rounded Borders with One to Four Values


In CSS, the border-radius property can take one, two, three, or four values to control the rounding of each corner. Depending on the number of values provided, the rounding of each corner will apply individually. Let’s understand it.

1. One Value: If a single value is provided, it applies the same rounded radius to all four corners of an HTML element. For example:

border-radius: 10px;

This sets a radius of 10px for all four corners.
[adinserter block=”5″]

2. Two Values: If two values are provided, the first value applies to the top-left and bottom-right corners, and the second value applies to the top-right and bottom-left corners. For example:

border-radius: 10px 20px;

This sets a radius of 10px for the top-left and bottom-right corners, and 20px for the top-right and bottom-left corners.

3. Three Values: When three values are given, the first value applies to the top-left corner, the second to the top-right and bottom-left corners, and the third to the bottom-right corner.

border-radius: 10px 20px 30px;

This sets a radius of 10px for the top-left corner, 20px for the top-right and bottom-left corners, and 30px for the bottom-right corner.

4. Four Values: When four values are specified, they apply to the top-left, top-right, bottom-right, and bottom-left corners respectively.

border-radius: 10px 20px 30px 40px;

This sets a radius of 10px for the top-left corner, 20px for the top-right corner, 30px for the bottom-right corner, and 40px for the bottom-left corner.

Example 2:

<!DOCTYPE html>
<html>
<head>
    <title>Border Radius with One to Four Values</title>
<style>
.one-value {
    background-color: lightblue;
    border: 2px solid blue;
    border-radius: 5px;
    padding:10px;
    margin-bottom: 10px
}
.two-values {
    background-color: lightblue;
    border: 2px solid blue;
    border-radius: 5px 10px;
    padding: 10px;
    margin-bottom: 10px;
}
.three-values {
    background-color: lightblue;
    border: 2px solid blue;
    border-radius: 10px 15px 20px;
    padding:10px;
    margin-bottom: 10px;
}
.four-values {
    background-color: lightgray;
    border: 2px solid blue;
    border-radius: 10px 15px 20px 25px;
    padding:10px;
}
</style>
</head>
<body>
    <div class="one-value">Border radius: 5px (all rounded corners have a radius of 10px)</div>
    <div class="two-values">Border radius: 5px 10px (top-left and bottom-right: 5px, top-right and bottom-left: 10px)</div>
    <div class="three-values">Border radius: 10px 15px 20px (top-left: 10px, top-right and bottom-left: 15px, bottom-right: 20px)</div>
    <div class="four-values">Border radius: 10px 15px 20px 25px (top-left: 10px, top-right: 15px, bottom-right: 20px, bottom-left: 25px)</div>
</body>
</html>

[adinserter block=”2″]

Output:

An example of rounded border radius with one to four values in CSS.
Individual Border Radius Properties in CSS


In CSS, you can individually control the radius of each corner of an element using specific border-radius properties. These properties are:

  • border-top-left-radius: This property rounds the top-left corner of an element.
  • border-top-right-radius: This property rounds the top-right corner of an element.
  • border-bottom-right-radius: This property rounds the bottom-right corner of an element.
  • border-bottom-left-radius: This property rounds the bottom-left corner of an element.

Each of these properties can accept one or two values to specify the horizontal and vertical radii of the corner. If two values are specified, the first value sets the horizontal radius and the second value sets the vertical radius.

The shorthand border-radius property in CSS combines all the individual border radius properties into one line to set the rounded radius for each corner of an element efficiently. For example:

border-radius: 10px; is equivalent to:

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

Example 3:

<!DOCTYPE html>
<html>
<head>
    <title>Individual Border Radius Properties Example</title>
<style>
div {
   background-color: lightblue;
   border: 2px solid blue;
   border-top-left-radius: 10px;
   border-top-right-radius: 20px;
   border-bottom-right-radius: 30px;
   border-bottom-left-radius: 40px;
   padding: 20px;
}
</style>
</head>
<body>
     <div>Individual Border Radius Properties Example</div>
</body>
</html>

Advanced Practical Examples on Rounded Borders


1. Elliptical Border Radius

We can also use the border-radius property to create elliptical rounded radius by specifying two values for each corner: horizontal and vertical radii. The basic shorthand syntax with two values is as:

selector {
     border-radius: horizontal-radius vertical-radius;
}

When we specify the border-radius property with two values, the first value sets the horizontal radius (width) and the second value sets the vertical radius (height) for all four corners.

Example 4:

<!DOCTYPE html>
<html>
<head>
     <title>Elliptical Border Radius Example</title>
<style>
.box {
   width: 200px;
   height: 200px;
   background-color: lightcoral;
   border: 2px solid darkred;
   border-radius: 50px 100px;
}
</style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

Output:

Elliptical border radius example
In this example code, the top-left and bottom-right corners have a horizontal radius of 50px and a vertical radius of 100px, which creates an elliptical effect.

If you want to more control, you can specify the border-radius property in a shorthand form that rounds elliptical radii for each corner. Let’s write the code for it.

Example 5:

<!DOCTYPE html>
<html>
<head>
    <title>Shorthand Elliptical Border Radius Example</title>
<style>
.box {
   width: 200px;
   height: 200px;
   background-color: lightpink;
   border: 2px solid deeppink;
   border-radius: 40px 20px 40px 30px / 30px 10px 20px 40px;
}
</style>
</head>
<body>
     <div class="box"></div>
</body>
</html>

Output:

An example of shorthand elliptical border-radius in CSS.
In this example, the values before the slash specifies the horizontal radii, and the values after the slash specifies the vertical radii.

Example 6:

<!DOCTYPE html>
<html>
<head>
     <title>Elliptical Border Radius</title>
<style>
.box {
    width: 200px;
    height: 200px;
    background-color: lightcoral;
    border: 2px solid darkred;
    border-radius: 50px / 20px; /* Elliptical radius */
}
</style>
</head>
<body>
     <div class="box"></div>
</body>
</html>

2. Circular Element Using Percentage

You can also use the shorthand border radius property to create circular images or avatars using a percentage value. Using a percentage value for the border-radius property creates radii relative to the dimensions of the element. Look at the example code below.

Example 7:

<!DOCTYPE html>
<html>
<head>
     <title>Circular Element Example</title>
<style>
.circle {
    width: 200px;
    height: 200px;
    background-color: lightgreen;
    border-radius: 50%; /* Makes the element circular */
}
</style>
</head>
<body>
     <div class="circle"></div>
</body>
</html>

Output:

An example of circular element using percentage in CSS.

3. Animation with Border Radius

You can also animate the shorthand border-radius property to make a dynamic and engaging element in the web design. You can achieve this by using CSS transitions or keyframes. Let’s take an example on it.

Example 8:

<!DOCTYPE html>
<html>
<head>
    <title>Animating Border Radius Example</title>
<style>
.animate-box {
    width: 200px;
    height: 200px;
    background-color: lightseagreen;
    border: 2px solid teal;
    border-radius: 0;
    transition: border-radius 1s ease-in-out;
}
.animate-box:hover {
    border-radius: 50%;
}
</style>
</head>
<body>
     <div class="animate-box"></div>
</body>
</html>

In this example, when you will hover over the box, it will smooth transition its border-radius from 0 to 50%, creating a circular shape.

The border-radius is a powerful shorthand property in CSS that allows you to create rounded corners or borders for HTML elements as well as more complex shapes with ease. By understanding its syntax, you can use border radius to enhance your web designs. While using border-radius property provided by CSS, you always use the valid units, such as pixels.

If you omit the specified unit for the border-radius property, the results can be unexpected. In this tutorial, we have explained border radius in CSS with a variety of examples. I hope that you will have understood the basic syntax of border radius property and practiced all the examples based on it.