CSS Borders

Border

border properties allow you to specify the style, width, and color of an element’s border.

border: width style color;

<div class="row">
    <div class="col-4">
        <h4>Border 1</h4>
        <div><strong>border:</strong> width color style</div>
        <div><strong>style:</strong> none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;</div>
        <div><strong>color:</strong> any color;</div>
        <div><strong>width:</strong> px;</div>
    </div>
    <div class="col-8" id="border_1">
        Hi my name is Folau
    </div>
</div>
        <style>
            #border_1{
                padding: 25px;
                border: blue solid 2px;
            }
        </style>

 

Border radius

border-radius property defines the radius of the element’s corners. This property allows you to add rounded corners to elements.

<div class="row">
    <div class="col-4">
        <h4>Border radius</h4>
    </div>
    <div class="col-8" id="borderRadius">
        Hi my name is Folau
    </div>
</div>
       <style>
            #borderRadius{
                border-radius: 25px;
                border: blue solid 2px;
            }
        </style>

Source code on Github




Subscribe To Our Newsletter
You will receive our latest post and tutorial.
Thank you for subscribing!

required
required


Leave a Reply

Your email address will not be published. Required fields are marked *