Border CSS part-3 - Comforting Tools

You can put the different sizes of border-width on the four sides of a border as shown here: border-width: 4px 11px 21px 35px; The border-width CSS property can be used with other properties like border-style", "border-radius", and "border-color" to create customized borders for HTML elements. Use the code below to create a border with different sizes on the four sides of a border.

Video Tutoral at https://youtu.be/aognRKnStVE

HTML

<!DOCTYPE html>
<html>
 <head>
     <style>
           .my-border {
                        border-style: solid;
                        border-color: darkgreen;
                        border-radius: 30px;
                        border-width: 4px 11px 21px 35px;
                        width: 80%;
                        color: blue;
                        text-align: center;
                        font-size: 50pt;
                        font-weight: bold;
                        font-family: arial;
                        background: yellow;
                      }

  p {
        padding: 100px;
}
     </style>
 </head>
<body>

<center>
<div class="my-border">
    <p>This is my text inside the border.</p>
</div>
</center>

</body>
</html>