Home » CSS

How to create CSS3 Rounded Corners?

In this tutorial, we will learn to create CSS3 rounded cornered with examples.
By Apurva Mathur Last updated : July 23, 2023

To create CSS3 rounded corners, you can simply use the border-radius property by specifying the radius of the borders in pixels or percentages. You can also independently define the radius for each border corner by using the constituent properties.

Syntax

Following is the syntax to create CSS3 rounded corners:

selector/element {
    border-radius: value;
}

Example

The below-given example shows how you can create CSS3 rounder corners.

<!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 Examples »

How to create a 4-column layout grid with CSS?

Change Bullet Color for Lists with ::marker CSS Selector