Border Radius Property In CSS


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.

CornerValue
Top Left10px
Top Right20px
Bottom Right30px
Bottom Left20px




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.


CornerValue
Top Left10px
Top Right10px
Bottom Right10px
Bottom Left10px






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;

Also, read:


Border Radius Property In CSS Border Radius Property In CSS Reviewed by Borad Akash on December 27, 2018 Rating: 5

No comments:

Powered by Blogger.