Border Radius Property In CSS

Border Radius Property In CSS

by

How to make rounded corners in css?

Css Border Radius Property with an Example
Border Radius Property in CSS to round the corner of an element.

border-radius is one of the properties of CSS. It is used to round the corner of an element.

Now, let’s see how to use it.

Usage

border-radius property can have one to four values.

1)border-radius with four values.

If border-radius property contains four values. then,
 
– the first value applies to top-left corner of an element
– second value applies to top-right corner of an element
– the third value applies to bottom-right corner of an element
– fourth value applies to bottom-left corner of an element.

 

<!DOCTYPE html> 
<html> 
  <head> 
  <title>Border Radius Example</title> 
  <style> 
     .border-radius-element { 
         border-radius:10px 20px 30px 40px; 
         background: #e92138; 
         padding: 30px; 
         text-align:center; 
         width: 250px; 
         height: 140px; 
         color:#fff
     } 
  </style> 
  </head> 
<body> 
<div class="border-radius-element"> 
     <h2>Border Radius Element</h2> 
     <p>border-radius: 10px 20px 30px 40px;</p></div> 
</body> 
</html>

Output

Border Radius Element

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

 
Following are the values for the corner radius for the above border-radius value.

 

Corner Value
Top Left 10px
Top Right 20px
Bottom Right 30px
Bottom Left 40px
 
 
 
 

2) border-radius with three values.

 
If border-radius property contains three values. then,
 
– the first value applies to top-left corner of an element
– second value applies to top-right and bottom-left corner of an element
– the third value applies to bottom-right corner of an element.

 

<!DOCTYPE html> 
<html> 
  <head> 
  <title>Border Radius Example</title> 
  <style> 
     .border-radius-element { 
         border-radius:10px 20px 30px; 
         background: #e92138; 
         padding: 30px; 
         text-align:center; 
         width: 250px; 
         height: 140px; 
         color:#fff
     } 
  </style> 
  </head> 
<body> 
<div class="border-radius-element"> 
     <h2>Border Radius Element</h2> 
     <p>border-radius: 10px 20px 30px;</p></div> 
</body> 
</html>

Output

Border Radius Element

border-radius: 10px 20px 30px;

Following are the values for the corner radius for the above border-radius value.

 

Corner Value
Top Left 10px
Top Right 20px
Bottom Right 30px
Bottom Left 20px
 
 
 

3) border-radius with two values.

 
If border-radius property contains two values. then,

 

– the first value applies to top-left and bottom-right corner of an element
– second value applies to top-right and bottom-left corner of an element.

 

<!DOCTYPE html> 
<html> 
  <head> 
  <title>Border Radius Example</title> 
  <style> 
     .border-radius-element { 
         border-radius:10px 20px; 
         background: #e92138; 
         padding: 30px; 
         text-align:center; 
         width: 250px; 
         height: 140px; 
         color:#fff
     } 
  </style> 
  </head> 
<body> 
<div class="border-radius-element"> 
     <h2>Border Radius Element</h2> 
     <p>border-radius: 10px 20px;</p></div> 
</body> 
</html>

Output

Border Radius Element

border-radius: 10px 20px;

 

Following are the values for the corner radius for the above border-radius value.

 
Corner
Value
Top Left
10px
Top Right
20px
Bottom Right
10px
Bottom Left
20px
 
 
 
 
 

4) border-radius with one values.

 
If border-radius property contains one value. then,

 

– the first value applies to all corners of an element.

 

 
<!DOCTYPE html> 
<html> 
  <head> 
  <title>Border Radius Example</title> 
  <style> 
     .border-radius-element { 
         border-radius:10px; 
         background: #e92138; 
         padding: 30px; 
         text-align:center; 
         width: 250px; 
         height: 140px; 
         color:#fff
     } 
  </style> 
  </head> 
<body> 
<div class="border-radius-element"> 
     <h2>Border Radius Element</h2> 
     <p>border-radius: 10px;</p></div> 
</body> 
</html>

Output

Border Radius Element

border-radius: 10px;

Following are the values for the corner radius for the above border-radius value.

 

Corner Value
Top Left 10px
Top Right 10px
Bottom Right 10px
Bottom Left 10px
 
 
 
 
 
There are also other  properties available for each corner.

 

1) border-top-left-radius:

This property can be used to set the value for top-left corner.

<!DOCTYPE html> 
<html> 
  <head> 
  <title>Border Top Left Radius Example</title> 
  <style> 
     .border-radius-element { 
 border-top-left-radius: 40px; 
 background: #e92138; 
 padding: 30px; 
 text-align:center; 
 width: 250px; 
 height: 140px; 
       color:#fff
     } 
  </style> 
  </head> 
<body> 
<div class="border-radius-element"> 
     <h2>Border Top Left Radius Element</h2> 
     <p>border-top-left-radius: 40px;</p></div> 
</body> 
</html>

Output

Border Top Left Radius Element

border-top-left-radius: 40px;

2) border-top-right-radius:

This property can be used to set the value for top-left corner.

<!DOCTYPE html> 
<html> 
  <head> 
  <title>Border Top Right Radius Example</title> 
  <style> 
     .border-radius-element { 
 border-top-right-radius: 40px; 
 background: #e92138; 
 padding: 30px; 
 text-align:center; 
 width: 250px; 
 height: 140px; 
       color:#fff
     } 
  </style> 
  </head> 
<body> 
<div class="border-radius-element"> 
     <h2>Border Top Right Radius Element</h2> 
     <p>border-top-left-radius: 40px;</p></div> 
</body> 
</html>

Output

Border Top Right Radius Element

border-top-right-radius: 40px;

3) border-bottom-left-radius:

This property can be used to set the value for top-left corner.

<!DOCTYPE html> 
<html> 
  <head> 
  <title>Border Bottom Left Radius Example</title> 
  <style> 
     .border-radius-element { 
 border-bottom-left-radius: 40px; 
 background: #e92138; 
 padding: 30px; 
 text-align:center; 
 width: 250px; 
 height: 140px; 
       color:#fff
     } 
  </style> 
  </head> 
<body> 
<div class="border-radius-element"> 
     <h2>Border Bottom Left Radius Element</h2> 
     <p>border-bottom-left-radius: 40px;</p></div> 
</body> 
</html>

Output

Border Bottom Left Radius Element

border-bottom-left-radius: 40px;

4) border-bottom-right-radius:

This property can be used to set the value for top-left corner.

<!DOCTYPE html> 
<html> 
  <head> 
  <title>Border Bottom Right Radius Example</title> 
  <style> 
     .border-radius-element { 
 border-bottom-right-radius: 40px; 
 background: #e92138; 
 padding: 30px; 
 text-align:center; 
 width: 250px; 
 height: 140px; 
       color:#fff
     } 
  </style> 
  </head> 
<body> 
<div class="border-radius-element"> 
     <h2>Border Bottom Right Radius Element</h2> 
     <p>border-top-left-radius: 40px;</p></div> 
</body> 
</html>

Output

Border Bottom Right Radius Element

border-bottom-right-radius: 40px;

 

I hope you like this Border Radius Property In CSS article. 🙂

Also, read:

Angular Percent Pipe Example
Angular Decimal Pipe Example

Leave a Comment