How To Use CSS Border Radius Properties For HTML Elements

admin_img Posted By Bajarangi soft , Posted On 05-11-2020

Using CSS we can set border-radius property, to any html element "rounded corners". So today we discuss how to do it.

How To Use CSS Border Radius Properties For HTML Elements

Complete Code For Using CSS Border Radius Properties For HTML Elements.

<!DOCTYPE html>
<html>
<head>
    <title>How To Use CSS Border Radius Properties For HTML Elements</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>

</head>
<style>
    body {
        background: #73AD21;
    }
    .div1{
        display:flex ;
    }
    .div2{
        display:flex ;
    }
    #rcorners1 {
        border-radius: 15px 50px 30px 5px;
        background: #c7254e;
        padding: 20px;
        width: 200px;
        height: 150px;
    }

    #rcorners2 {
        border-radius: 15px 50px 30px;
        background: #c7254e;
        padding: 20px;
        width: 200px;
        height: 150px;
    }

    #rcorners3 {
        border-radius: 15px 50px;
        background: #c7254e;
        padding: 20px;
        width: 200px;
        height: 150px;
    }

    #rcorners4 {
        border-radius: 15px;
        background: #c7254e;
        padding: 20px;
        width: 200px;
        height: 150px;
    }
</style>
<body>
<br/><br/>
<div class="container">
    <br>
    <div class="text-center">
        <h1 id="color" style="color: white;"> CSS Border Radius Properties For HTML Elements</h1>
    </div>
    <br>
    <div class="well">
        <h2 class="text-center">The border-radius Property</h2>
        <div class="div1">
            <div class="col-md-6">
                <p>Four values - border-radius: 15px 50px 30px 5px:</p>
                <p id="rcorners1"></p>
            </div>

           <div class="col-md-6">
               <p>Three values - border-radius: 15px 50px 30px:</p>
               <p id="rcorners2"></p>
           </div>
        </div>
            <div class="div2">
           <div class="col-md-6">
               <p>Two values - border-radius: 15px 50px:</p>
               <p id="rcorners3"></p>
           </div>

           <div class="col-md-6">
               <p>One value - border-radius: 15px:</p>
               <p id="rcorners4"></p>
           </div>
        </div>
    </div>
</div>
</body>
</html>

Related Post