How to make rounded corner using CSS ?

Last Updated : 21 Jun, 2024

Creating rounded corners is a popular design technique in web development that enhances the visual appeal of web elements. The CSS border-radius property allows you to easily set the radius of an element's corners, making them rounded.

In this article, we will explore how to use the border-radius property with various examples to achieve different rounded corner effects. We'll cover individual corner styling as well as shorthand methods for applying border-radius values efficiently.

Syntax:

/* It sets the radius value to all 4 corners */
border-radius: value;

Example 1: This example describes the border-radius to make the rounded corners.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0">
   
    <style>
        .container {
            border: 1px solid black;
            width: 300px;
            height: 200px;
            background-color: aqua;         
            /* This set radius to all 4 corners */  
            border-radius: 10px; 
        }
    </style>
</head>

<body>
    <h2 style="color:green">GeeksforGeeks</h2>
    <div class="container">
        <p text-align="center"> Rounded corner</p>
    </div>
</body>

</html>

Output:

Example 2: This example describes the use of border-bottom-left-radius property to make a rounded corner at the bottom left.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
   
    <style>
        .container {
            border: 1px solid black;
            width: 300px;
            height: 200px;
            background-color: aqua;                             
            border-bottom-left-radius: 30px;  
        }
    </style>
</head>

<body>
    <h2>GeeksforGeeks</h2>
    <div class="container">
        <p text-align="center"> 
            This is Rounded corner at <b>bottom left</b>
        </p>
    </div>
</body>

</html>

Output:

Example 3: This example describes the use of border-top-right-radius property to make a rounded corner at the top-right corner.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
   
    <style>
        .container {
            border: 1px solid black;
            width: 300px;
            height: 200px;
            background-color: aqua;                             
            border-top-right-radius: 30px; 
        }
    </style>
</head>

<body>
    <h2>GeeksforGeeks</h2>
    <div class="container">
        <p text-align="center"> 
            This is Rounded corner at <b>top right</b>
        </p>
    </div>
</body>

</html>

Output:

Example 4: This example describes the use of border-bottom-right-radius property to make the rounded corner at the bottom right.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
   
    <style>
        .container {
            border: 1px solid black;
            width: 300px;
            height: 200px;
            background-color: aqua;                             
            border-bottom-right-radius: 30px;  
        }
    </style>
</head>

<body>
    <h2>GeeksforGeeks</h2>
    <div class="container">
        <p text-align="center"> 
            This is Rounded corner at <b>bottom right</b>
        </p>
    </div>
</body>

</html>

Output:

Example 5:This example describes the use of border-top-left-radius property to make the corner at the top-left.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
   
    <style>
        .container {
            border: 1px solid black;
            width: 300px;
            height: 200px;
            background-color: aqua;                             
            border-top-left-radius: 30px;  
        }
    </style>
</head>

<body>
    <h2>GeeksforGeeks</h2>
    <div class="container">
        <p text-align="center"> 
            This is Rounded corner at <b>top left</b>
        </p>
    </div>
</body>

</html>

Output:

The border-radius property in CSS is a versatile tool for creating visually appealing rounded corners on web elements. This article covered various methods to apply rounded corners, including individual corner properties and shorthand techniques. By You can enhance the design of your web pages, creating a more polished and professional look. Experiment with different radius values to achieve the desired effect and improve the overall web designs.