In this article, we will discuss rounded corners by using CSS properties. When we remove the sharp edge of any element and give it a round shape, it is called a rounded corner.
Approach: To change the sharp edge with a rounded edge we use the border-radius property.
Example 1: In this example, we named the HTML div tag with class rounded and styled it using native CSS properties, we applied the border-radius property to round the corners.
HTML
<!DOCTYPE html> <html>
<head>
<style>
div {
background: green;
height: 100px;
width: 200px;
}
.rounded {
border-radius: 10px;
}
</style>
</head>
<body>
<p><b>
Before applying rounded
class to div:
</b></p>
<div></div>
<p><b>
After applying rounded
class to div:
</b></p>
<div class="rounded"></div>
</body>
</html>
|
Output:
Example 2: We can also round the corner of an image. In the stylings of the image we just have to pass the same CSS border-radius property.
HTML
<!DOCTYPE html> <html>
<head>
<style>
img {
border-radius: 10px;
}
</style>
</head>
<body>
<img src=
alt="image" />
</body>
</html>
|
Output:
Note: Please refer to the article on CSS border-radius property for a better understanding.