ROUNDED CORNER IN CSS

Share the post

If you are worried about how to design the rounded corner in CSS then this tutorial will help you to achieve your goal. In this topic, We will discuss How to round the corner of any box shape element. We will discuss the CSS property border-radius.  

border-radius Property :

This property will define how many corners should be rounded off an element. We will see the use of it by using the below example.  

Rounded Corner Example in CSS :

<html>
 <head>
  <h1>CSS : Rounded Border Example</h1>
   <style>
.rounder-corner {
border-radius: 50px;
height: 250px;
width: 250px;
background-color: brown;
}
</style>
</head>
<body>
<div class="rounder-corner"></div>
</body>
</html>

Output  :

Output
Output

If you observe in the above output the corner of the div element has been rounded by 50px. If you want a more rounded corner then go ahead & increase this value. So, this is how we can use the border-radius property in CSS.

Leave a Comment