CSS | border radius property - Tutorialspoint.dev

It is a CSS property to round the corner of an element. The border-radius property is used to set the border-radius.

border-radius-property

Rounded Corner property:

border-radius: border-radius property can contain one, two, three or four values.

border-radius: 35px; It is used to set border-radius of each corners. It is the combination of four properties: border-top-left-radius, border-top-right-radius, border-botton-left-radius, border-bottom-right-radius. It sets all corner to the same value.

<!DOCTYPE html> 
<html> 
<head> 
<title>Rounded Corners</title> 
<style> 
.GFG { 
    border-radius: 35px; 
    background: #009900; 
    padding: 30px;  
    text-align:center; 
    width: 300px; 
    height: 120px;  
} 
</style> 
</head> 
<body> 
    <div class="GFG"> 
<h2>GeeksforGeeks</h2> 
<p>border-radius: 35px;</p></div> 
</body> 
</html> 

Output:
border-radius

border-radius: 20px 40px; This property is used to set first value as top-left and bottom right corner and second value as top right and bottom left corners.

<!DOCTYPE html> 
<html> 
<head> 
<title>Rounded Corners</title> 
<style> 
.GFG { 
    border-radius: 20px 40px; 
    background: #009900; 
    padding: 30px;  
    text-align:center; 
    width: 300px; 
    height: 120px;  
} 
</style> 
</head> 
<body> 
    <div class="GFG"> 
<h2>GeeksforGeeks</h2> 
<p>border-radius: 20px 40px;</p></div> 
</body> 
</html> 

Output:
border-radius-two -value

border-radius: 20px 40px 60px; This property is used to set first value to top-left corner, second value applied to top-right and bottom left corners and third value applied to bottom right corner.

<!DOCTYPE html> 
<html> 
<head> 
<title>Rounded Corners</title> 
<style> 
.GFG { 
    border-radius: 20px 40px 60px; 
    background: #009900; 
    padding: 30px;  
    text-align:center; 
    width: 300px; 
    height: 120px;  
} 
</style> 
</head> 
<body> 
    <div class="GFG"> 
<h2>GeeksforGeeks</h2> 
<p>border-radius: 20px 40px 60px;</p></div> 
</body> 
</html> 

Output:
border-radius-three-value

border-radius: 20px 40px 60px 80px; This property is used to set first, second, third and fourth value of border radius to top-left, top-right, bottom-right and bottom-left corners respectively.

<!DOCTYPE html> 
<html> 
<head> 
<title>Rounded Corners</title> 
<style> 
.GFG { 
    border-radius: 20px 40px 60px 80px; 
    background: #009900; 
    padding: 30px;  
    text-align:center; 
    width: 300px; 
    height: 120px;  
} 
</style> 
</head> 
<body> 
    <div class="GFG"> 
<h2>GeeksforGeeks</h2> 
<p>border-radius: 20px 40px 60px 80px;</p></div> 
</body> 
</html> 

Output:
border-radius-four-value

border-top-left-radius: This property is used to set the value to top-left corner.

<!DOCTYPE html> 
<html> 
<head> 
<title>Rounded Corners</title> 
<style> 
.GFG { 
    border-top-left-radius: 35px; 
    background: #009900; 
    padding: 30px;  
    text-align:center; 
    width: 300px; 
    height: 120px;  
} 
</style> 
</head> 
<body> 
    <div class="GFG"> 
<h2>GeeksforGeeks</h2> 
<p>border-top-left-radius: 35px;</p></div> 
</body> 
</html> 

Output:
border-top-left-radius

border-top-right-radius: This property is used to set the value to top-right corner.

<!DOCTYPE html> 
<html> 
<head> 
<title>Rounded Corners</title> 
<style> 
.GFG { 
    border-top-right-radius: 35px; 
    background: #009900; 
    padding: 30px;  
    text-align:center; 
    width: 300px; 
    height: 120px;  
} 
</style> 
</head> 
<body> 
    <div class="GFG"> 
<h2>GeeksforGeeks</h2> 
<p>border-top-right-radius: 35px;</p></div> 
</body> 
</html> 

Output:
border-top-right-border

border-bottom-left-radius: This property is used to set the value to bottom-left corner.

<!DOCTYPE html> 
<html> 
<head> 
<title>Rounded Corners</title> 
<style> 
.GFG { 
    border-bottom-left-radius: 35px; 
    background: #009900; 
    padding: 30px;  
    text-align:center; 
    width: 300px; 
    height: 120px;  
} 
</style> 
</head> 
<body> 
    <div class="GFG"> 
<h2>GeeksforGeeks</h2> 
<p>border-bottom-left-radius: 35px;</p></div> 
</body> 
</html> 

Output:
border-bottom-left-radius

border-bottom-right-radius: This property is used to set the value to bottom-right corner.

<!DOCTYPE html> 
<html> 
<head> 
<title>Rounded Corners</title> 
<style> 
.GFG { 
    border-bottom-right-radius: 35px; 
    background: #009900; 
    padding: 30px;  
    text-align:center; 
    width: 300px; 
    height: 120px;  
} 
</style> 
</head> 
<body> 
    <div class="GFG"> 
<h2>GeeksforGeeks</h2> 
<p>border-bottom-right-radius: 35px;</p></div> 
</body> 
</html> 

Output:
border-bottom-right-radius

mixed border-radius property: This property is used to set all corners as given value.

<!DOCTYPE html> 
<html> 
<head> 
<title>Rounded Corners</title> 
<style> 
.GFG { 
    border-top-left-radius: 35px; 
    border-top-right-radius: 35px; 
    border-bottom-left-radius: 35px; 
    border-bottom-right-radius: 35px; 
    background: #009900; 
    padding: 30px;  
    text-align:center; 
    width: 300px; 
    height: 120px;  
} 
</style> 
</head> 
<body> 
    <div class="GFG"> 
<h2>GeeksforGeeks</h2> 
<p>border-top-left-radius: 35px; 
<br>border-top-right-radius: 35px; 
<br>border-bottom-left-radius: 35px; 
<br>border-bottom-right-radius: 35px;</p></div> 
</body> 
</html> 

Output:
mixed-border-radius-property

CSS | border radius property

tags:

leave a comment

0 Comments

Subscribe to Our Newsletter

Top Followed books