Home »
CSS
How to create CSS3 Rounded Corners?
In this tutorial, we will learn to create CSS3 rounded cornered with examples.
Submitted by Apurva Mathur, on June 24, 2022
The border-radius property of CSS converts the normal edges of any borders into the corners. This property is commonly used to set image edges. This property does not have any specific value; you can set the value according to your desire. To apply this property it’s important to first provide the border value.
Syntax:
selector/element {
border-radius: value;
}
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
.one{
border: 4px solid salmon;
border-radius: 25%;
height: 60px;
width: 20%;
font-size: 30px;
}
p{
text-align: center;
}
img{
margin-top: 1%;
border-radius: 50%;
}
.two{
border: 4px solid black;
border-radius: 100%;
height: 60px;
width: 20%;
font-size: 20px;
}
</style>
<body style="background-color: whitesmoke">
<div class="one">
<p> Border radius 25%</p>
</div>
<h3>Border radius 50%</h3>
<img src="https://cdn-prod.medicalnewstoday.com/content/images/articles/325/325466/man-walking-dog.jpg" height="10%" width="30%" >
<div class="two">
<p>Border radius 100%</p>
</div>
</body>
</html>
Output:
CSS Tutorial & Examples »