Table of Contents
How to make rounded corners in css?
![]() |
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
1)border-radius with four values.
<!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;
Corner | Value |
---|---|
Top Left | 10px |
Top Right | 20px |
Bottom Right | 30px |
Bottom Left | 40px |
2) border-radius with three values.
<!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;
Corner | Value |
---|---|
Top Left | 10px |
Top Right | 20px |
Bottom Right | 30px |
Bottom Left | 20px |
3) border-radius with two values.
<!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.
<!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;
Corner | Value |
---|---|
Top Left | 10px |
Top Right | 10px |
Bottom Right | 10px |
Bottom Left | 10px |
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 Slice Pipe Example
- Angular Date Pipe Example
- Custom Validators in Angular
- Getting Started With Angular Reactive Forms
- Angular Reactive Forms With Built In Validators Example
- Match Password Validation in Angular Reactive Forms
- CSS Tricks for Uppercase and LowerCase and TitleCase
- Get Started With Ionic4
- How to use ngrx/store with Ionic 4