Div, Borders, and Boxes

The div tag in CSS helps to set up bock-elements to be formatted with CSS.
In this example, we will see how this tag is used along with properties like border-color, border-style and border-width.
Here is the code of the HTML and embedded CSS style sheets:

<title> Borders and Boxes </title>
<style type="text/css">
div {text-align:left; position:relative; width:30%; border-width:10px; } .blue {border-color: blue;} .dashed {border-style: dashed;} .dotted {border-style: dotted;} .double {border-style: double;} .grouve {border-style:grouve;} .inset {border-style:inset;} .medium {border-width: medium;} .outset {border-style:outset;} .red {border-color: red;} .ridge {border-style:ridge;} .solid {border-style:solid;} .thick {border-width: thick;} .thin {border-width:thin;} body {font-family: arial, sans-serif;} h2 {font-family: arial, sans-serif; text-decoration: underline;} p {font-family: calibri; background-color:yellow; font-size: large; margin-bottom: 1em;} </style>
<p> A set of different border of block-level elements will be displayed. </p>
<div class="dotted"> Dotted border </div><hr><hr>
<div class="inset"> Inset border </div><hr><hr>
<div class="medium"> Medium border </div><hr><hr>
<div class="grouve"> Grouve border </div><hr><hr>
<div class="ridge"> Ridge border </div><hr><hr>
<div class="solid"> Solid border </div><hr><hr>
<div class="thick"> Thick border </div><hr><hr>
<div class="thin"> Thin border </div><hr><hr>

The rendered document looks like this:

For more details, please contact me here.
Date of last modification: 2020.