You can give any element/ image “rounded corners” with the CSS border-radius property.
The CSS border-radius property specifies the radius of an element’s corners.
Tip: The CSS border-radius property is actually a shorthand property for the border-top-left-radius, border-top-right-radius, border-bottom-right-radius and border-bottom-left-radius properties.
Example:
<!doctype html>
<html>
<head>
<title></title>
<style>
.square {
width: 100px;
height: 100px;
background-color: red;
border-radius:30px;
}
</style>
</head>
<body>
<div class="square"></div>
</body>
</html>Output:
The CSS border-radius property can have from one to four values (specify each corner). Here are the rules:
<!doctype html>
<html>
<head>
<title></title>
<style>
.square {
width: 100px;
height: 100px;
background-color: red;
border-radius:30px 50px 10px 60px;
}
</style>
</head>
<body>
<div class="square"></div>
</body>
</html>Output:
You can also create elliptical corners:
<!doctype html>
<html>
<head>
<style>
.square {
width: 100px;
height: 100px;
background-color: red;
border-radius:30px/60px;
}
</style>
</head>
<body>
<div class="square"></div>
</body>
</html>Output:
To create a circle, use the border-radius property and set the value to 50%:
<!doctype html>
<html>
<head>
<style>
.circle {
width: 100px;
height: 100px;
background-color: red;
border-radius:50%;
}
</style>
</head>
<body>
<div class="circle"></div>
</body>
</html>Output:
Enjoy coding!
Read also: