CSS Border

By default, an element has no border. You can add a border to an element by using <b>border</b> keyword. By using this keyword, you can add 3 values: the width in px, border type eg. solid, dashed, dot, etc., and the color of the border.

.border {
   border: 3px solid blue;
}
<div class="border">

</div>
Output
 

You can also set the border by values eg. border-right, border-top, border-left, border-bottom, border-style and border-color.

.border {
   border-right: 1px;
   border-top: 2px;
   border-left: 3px;
   border-bottom: 4px;
   border-color: blue;
   border-style: solid
}
Output
 

Rounded Borders

You can have a rounded borders using border-radius keyword.

.border {
   border: 3px solid blue;
   border-radius: 5px;
}
Output
 
Share this tutorial!