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>