CSS Borders

Border

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

border: width style color;

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<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>
<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>
<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.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<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>
<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>
<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 *