#   
## What is the ``border-radius``?

**`border-radius`** is a CSS property that defines the radius of the corners of an element.

It gives a rounded shape to the corners of an element's outer border edge. The values of the border radius can be declared in percentages or length units.

The image below shows the different corners of an element. 

## Syntax

```css
border-radius: num_px percentage;
```
## Parameters
* `num_px`: This is the number of pixels you want for the radius.
* `percentage`: This is the percentage you want the border to be edited.

> You can also use the `inherit`, `initial`, `revert`, or `unset` properties. 

## How to use `border-radius`

The `border-radius` property can have one to four values.

> The corners are rounded depending on the value passed into the property.

We have stated the range of values that can be declared, so let's move on and see how it works.

## One value border-radius
When you pass in one value into the `border-radius`, it rounds all the corners of your elements equally.

### Example 1



<!DOCTYPE html>
<html>
<head>
<style>
#original-img {
  width: 100px;
  height: 100px; 
}  
#image-corners {
  border-radius: 20px;
  
  border-color: turqoise;
  border-style: solid;
  border-width: 8px;
  width: 100px;
  height: 100px;   
}
</style>

</head>
<h4> One Value border-radius</h4>
<body>
  <figure>
    <a href="#"><img id = original-img src="https://bit.ly/3jCXteR" 
    alt="A coffee cup."></a>
    <figcaption>Original image (Image via TechSpot) </figcaption>
  </figure>
  <figure>
    <a href="#"><img id = image-corners src="https://bit.ly/3jCXteR" 
    alt="A coffee cup."></a>
    <figcaption>Rounded image</figcaption>
  </figure>
</body>
</html>

codemirror

## Two value border-radius
When you pass two values into the `border-radius` property, the first value will be used for the _top-left_ and _bottom-right_ corners.

The second value will be used for the _top-right_ and _bottom-left_ corners.

### Example 2


<!DOCTYPE html>
<html>
<head>
<style>
#original-img {
  width: 100px;
  height: 100px; 
}  
#image-corners {
  border-radius: 20px 40px; 
  
  border-color: turqoise;
  border-style: solid;
  border-width: 8px;
  width: 100px;
  height: 100px;   
}
</style>

</head>
<h4> One Value border-radius</h4>
<body>
  <figure>
    <a href="#"><img id = original-img src="https://bit.ly/3jCXteR" 
    alt="A coffee cup."></a>
    <figcaption>Original image (Image via TechSpot) </figcaption>
  </figure>
  <figure>
    <a href="#"><img id = image-corners src="https://bit.ly/3jCXteR" 
    alt="A coffee cup."></a>
    <figcaption>Rounded image</figcaption>
  </figure>
</body>
</html>

## Three value border-radius
For three values, the first value is used for the _top-left_ corner.

The second value is used for the _top-right_ and _bottom-left_ corners, while the third value is used for the *bottom-right* corner.

### Example 3


<!DOCTYPE html>
<html>
<head>
<style>
#original-img {
  width: 100px;
  height: 100px; 
}  
#image-corners {
  border-radius: 20px 40px 5px; 
  
  border-color: turqoise;
  border-style: solid;
  border-width: 8px;
  width: 100px;
  height: 100px;   
}
</style>

</head>
<h4> One Value border-radius</h4>
<body>
  <figure>
    <a href="#"><img id = original-img src="https://bit.ly/3jCXteR" 
    alt="A coffee cup."></a>
    <figcaption>Original image (Image via TechSpot) </figcaption>
  </figure>
  <figure>
    <a href="#"><img id = image-corners src="https://bit.ly/3jCXteR" 
    alt="A coffee cup."></a>
    <figcaption>Rounded image</figcaption>
  </figure>
</body>
</html>

## Four value border-radius
When four values are declared, the first value is used for the _top-left_ corner, the second value for the _top-right_ corner, the third value applies to _bottom-right_ corner and the fourth value applies to _bottom-left_.

### Example 4


<!DOCTYPE html>
<html>
<head>
<style>
#original-img {
  width: 100px;
  height: 100px; 
}  
#image-corners {
  border-radius: 10px 25px 50px 100px; 
  
  border-color: turqoise;
  border-style: solid;
  border-width: 8px;
  width: 100px;
  height: 100px;   
}
</style>

</head>
<h4> One Value border-radius</h4>
<body>
  <figure>
    <a href="#"><img id = original-img src="https://bit.ly/3jCXteR" 
    alt="A coffee cup."></a>
    <figcaption>Original image (Image via TechSpot) </figcaption>
  </figure>
  <figure>
    <a href="#"><img id = image-corners src="https://bit.ly/3jCXteR" 
    alt="A coffee cup."></a>
    <figcaption>Rounded image</figcaption>
  </figure>
</body>
</html>

How to create a border radius in CSS

 What is the border-radius? border-radius is a CSS property that defines the radius of the corners of an element. It gives a rounded shape to the corners of an element s outer border edge. The values of the border radius can be declared in percentages or length units. The image below shows the different corners of an element. 

How to create a border radius in CSS

What is the border-radius?

Syntax

Parameters

How to use border-radius

One value border-radius

Example 1

Two value border-radius

Example 2

Three value border-radius

Example 3

Four value border-radius

Example 4

What is the `border-radius`?

How to use `border-radius`