Everything in a web page has a box around it. These boxes are mostly invisible but they control how everything is arranged and laid out on the page. We call this the CSS Box Model.

Each box has:

• Margins - top, bottom, left and right margins outside the box. These are transparent.
• Borders - top, bottom, left and right borders of the box. These can be set to a colour.
• Padding - top, bottom, left and right padding inside the box. These are transparent.
• Content - The content of the box. This can be text, images etc.

Let's take a look at CSS Borders first. Here are some examples of <div></div> elements that have different borders applied to them using CSS.

The border-style CSS property sets the style of border to use on the box. The following values can be set for border-style:

• dotted - sets a dotted border.
• dashed - sets a dashed border.
• solid - sets a solid border.
• double - sets a double border.
• groove - sets a 3D grooved border.
• ridge - sets a 3D ridged border.
• inset - sets a 3D inset border.
• outset - sets a 3D outset border.
• none - sets no border.
• hidden - sets a hidden border.

The border-width CSS property sets how wide (usually in pixels) the border is.  

We can also set different widths for each of the top, right, bottom and left borders by providing 4 values for the border-width CSS property in the following order:

1. top width
2. right width
3. bottom width
4. left width 

The border-color CSS property sets the colour of the border. The values we can use to set the colour can be:

• A colour name - for example "red".
• A HEX value - for example "#0000FF". A hexadecimal value is made up of hexadecimal numbers for red, green and blue to create one colour.
• A RGB value - for example "rgb(0,255,100)". This sets the values for red, green and blue to create one colour.
• Transparent - we can set a border to be transparent.