Example

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">
    <link name="favicon" type="image/x-icon" href="https://skillzam.com/uploads/system/e353194f3b7cd1b75d69c3ab88041985.png" rel="shortcut icon" />
    <title>Rounded corners</title>

    <style>

        .para {
            background: cornflowerblue;
            padding: 20px; 
            width: 300px;
            height: 200px; 
        }

        #rounded1 {
            border-radius: 15px 50px 30px 5px;
        }

        #rounded2 {
            border-radius: 15px 50px 30px;
        }

        #rounded3 {
            border-top-left-radius: 15px;
            border-bottom-right-radius: 15px;
            border-top-right-radius: 50px;
            border-bottom-left-radius: 50px;
            /* border-radius: 15px 50px; */ /* All four above properties can be replaced by this commented shorthand "border-radius" */
        } 

        #rounded4 {
            border-radius: 15px;
        } 

        #rounded5 {
            border-radius: 50px / 15px;
        }

        #rounded6 {
            border-radius: 15px / 50px;
        }

        #rounded7 {
            border-radius: 50%;
        } 

        #rounded8 {
            border-radius: 50%;
            width: 300px;
            height: 300px; 
        }

    </style>

</head>
<body>
<!-- 
    border-radius : property can give any element - rounded corners.
    border-radius property is actually a shorthand property for the 
        - border-top-left-radius
        - border-top-right-radius 
        - border-bottom-right-radius  
        - border-bottom-left-radius
-->

    <h1>Demo: rounded corners (border-radius)</h1> 
        
    <p>Four values Example - border-radius: 15px 50px 30px 5px:</p>
    <p id="rounded1" class="para"></p>
    
    <p>Three values Example - border-radius: 15px 50px 30px:</p>
    <p id="rounded2" class="para"></p>
    
    <p>Two values Example - border-radius: 15px 50px:</p>
    <p id="rounded3" class="para"></p>
    
    <p>One value Example - border-radius: 15px:</p>
    <p id="rounded4" class="para"></p>
    
    <p>Elliptical border Example - border-radius: 50px / 15px:</p>
    <p id="rounded5" class="para"></p>

    <p>Elliptical border Example - border-radius: 15px / 50px:</p>
    <p id="rounded6" class="para"></p>

    <p>Ellipse border Example - border-radius: 50%:</p>
    <p id="rounded7" class="para"></p>

    <p> Circle Example - border-radius: 50%:</p>
    <p id="rounded8" class="para"></p>

</body>
</html>
Output

View original