CSS Border Radius

Prev
Next

Border Radius

So, what is Border Radius? Now, to provide rounded corners to any element, we should use border-radius.

border radius

border radius examples

border radius

solid border with black color with radius

dotted border with yellow color and radius provided

groove border with elliptical border

CSS Border

As, CSS border Radius is used to set rounded borders and to provide rounded corners around any element, tags or div, we use border-radius property.

border-radius is the shorthand for border-top-left-radius, border-top-right-radius, border-bottom-right-radius and border-bottom-left-radius.

You can give the value of the radius for the border in terms of  either:

  • length(in px,em,ex,vw,rem,mm,cm,in,ex,ch etc)
  • %
  • initial
  • inherit
  • unset
You can also give border radius with background image or border image as well.

Syntax of CSS-Border(in shorthand):
border-radius: value(in length,percent,initial,inherit,unset);

This is a shorthand syntax of CSS border-radius property and the most preferred syntax for border radius. 

Example to use shorthand border-radius property

<style> 
.border_radius1 {
  border:5px solid blue;
  border-radius: 40px;
  color:black;
  padding: 10px; 
  width: 120px;
  height: 190px;  
}

.border_radius2 {
  border:3px groove darkblue;
  border-radius: 50%;
  background-color: red;
  padding: 10px; 
  width: 100px;
  height: 100px;  
}

.border_radius3 {
  border:3px groove yellow;
  border-radius: initial;
  background-color: green;
  color:white;
  padding: 10px; 
  width: 100px;
  height: 100px;  
}
</style>
Run the Code
If border-radius has 1 value:
Example:
border-radius: 5px;

Here,  the radius of top left , top right , bottom left , and bottom right borders are 5px each.

If border-radius has 2 values:
Example:
border-radius: 10% 5em;

In this case, then, the radius of the top left and bottom right are 10% each. Similarly, the radius of the top right and bottom left are 5em each.

If border-radius has 3 values:
Example:
border-radius: 5px initial 20%;

As a result, the radius of the top left is 5px, the radius of top right and bottom left are set to initial each. Similarly, the radius of the bottom right will be 20%.

If border-radius has 4 values:
Example:
border-radius: 5px 10% 4em 8px;

Similarly, radius of top left is 5px, top right is 10%, bottom right is set to 4em, and bottom left will be 8px.

Example showing border-radius with 2 values and 3 values

<style> 
#bor-rad2val {
  background-color:powderblue;
  border: 2px solid red;
  width:300px;
  height:150px;
  padding: 10px;
  border-radius: 30px 10px;
}
#bor-rad3val {
  border: 2px solid green;
  border-radius: 1em 10% 30px;
  padding: 10px;
}
</style>
Run the Code
If border-radius has 1 value along with ‘/’ symbol.
For Example:
border-radius: 3px / 2em;
  • border-top-left-radius: 3px 2em; 
  • border-top-right-radius: 3px 2em; 
  • border-bottom-right-radius: 3px 2em;
  • border-bottom-left-radius: 3px 2em; each.
If border-radius has 2 values along with ‘/’ symbol.
Example 1:
border-radius: 10% 5em / 10px;
  • border-top-left-radius: 10% 10px;
  • border-bottom-right-radius:10% 10px; 
  • border-top-right-radius:5em 10px;
  • border-bottom-left-radius:5em 10px;
Example 2:
border-radius: 10% 5em / 10px 20px;
  • border-top-left-radius: 10% 10px;
  • border-bottom-right-radius:10% 10px;
  • border-top-right-radius:5em 20px;
  • border-bottom-left-radius:5em 20px;
Example 3:
border-radius: 10% 5em / 10px 20px 30px;
  • border-top-left-radius: 10% 10px;
  • border-bottom-right-radius:10% 30px;
  • border-top-right-radius:5em 20px;
  • border-bottom-left-radius:5em 20px;
If border-radius has 3 values along with ‘/’ symbol
Example:
border-radius: 5px 3em 20% / 8px 10px;
  • border-top-left-radius: 5px 8px; 
  • border-bottom-right-radius:20% 8px;  
  • border-top-right-radius:3em 10px;
  • border-bottom-left-radius:3em 10px;
If border-radius has 4 values along with ‘/’ symbol.
Example:
border-radius: 5px 10% 4em 8px / 3px;
  • border-top-left-radius: 5px 3px; 
  • border-top-right-radius:10% 3px;  
  • border-bottom-right-radius:4em 3px;
  • border-bottom-left-radius:8px 3px;

So, rounded borders can be made for all the 4 borders radius at the same time using border-radius shorthand property as shown above or it can also be made by setting up the border-radius for each border separately using a subset of border-radius property like –

  1. For a radius of the top left border – The property is border-top-left-radius.
  2. And the radius of a top right border – The property is border-top-right-radius.
  3. Here radius of the bottom right border – The property is border-bottom-right-radius.
  4. If the radius of the bottom left border – The property is border-bottom-left-radius.
individual border radius separately

Example for defined individual border radius separately

<style> 
#bor-rad8val {
  background-color:aquA;
  border: 2px solid RED;
  width:350px;
  height:200px;
  padding: 10px;
  border-top-left-radius: 8em 1.5em;
  border-top-right-radius: 30%;
  border-bottom-right-radius: 15em 20em;
}
</style>
Run the Code

CSS Interview Question and Answers

We can apply border-radius for two corners in two ways:

  1. By mentioning border with corner name.

Example:

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

 

2. By giving only two values to border-radius.

Example:

If border-radius has 2 values:

border-radius: 10% 5em;

In this case, the radius of the top left and bottom right are 10% each. Similarly, the radius of the top right and bottom left are 5em each.

Create a circle using CSS border property and set width and height to increase or decrease the circle size.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
.border_radius22 {
  border:2px solid transparent;
  border-radius: 50%;
  background-color: skyblue;
  padding: 30px; 
  width: 100px;
  height: 100px;  
}

</style>
</head>
<body>
<div class="border_radius22">
<p>A Border has the radius of 50% </p>
</div>
</body>
</html>

Associated border-radius properties are:

For a radius of the top left border – The property is border-top-left-radius.
And the radius of a top right border – The property is border-top-right-radius.
Here the radius of the bottom right border – The property is border-bottom-right-radius.
If the radius of the bottom left border – The property is border-bottom-left-radius.
Prev
Next
Facebook Twitter Google-plus

Tutorials for all brains!