Style

A border can be invisible (this is the default), solid, dashed, dotted, ridge or groove. Example:

.non { border: none; }
.sol { border: solid; }
.das { border: dashed; }
.dot { border: dotted; }
.rig { border: ridge; }
.gro { border: groove; }

<DIV class="non">This border is invisible</DIV>

<DIV class="sol">This border is solid</DIV>


<DIV class="das">This border is dashed</DIV>


<DIV class="dot">This border is dotted</DIV>


<DIV class="rig">This border is ridge</DIV>


<DIV class="gro">This border is groove</DIV>

Width

The border width can be can be thin, medium, thick, or expressed in pixel.
Example:

.a { border: thin solid; }
.b { border: medium solid; }
.c { border: thick solid; }
.d { border: 1px solid; }

<DIV class="a">This border is thin</DIV>


<DIV class="b">This border is medium</DIV>


<DIV class="c">This border is thick</DIV>


<DIV class="d">This border is 1px wide</DIV>

Colour

The border colour can be can be expressed with a colour name, or in RGB code, or in HEX code.
Example:

.e { border: 2px solid red; }
.f { border: 2px solid; border-color: rgb(255,153,102); }
.g { border: 2px solid; border-color: #9966CC; }

<DIV class="e">This border is red</DIV>


<DIV class="f">This border is...orange</DIV>


<DIV class="g">This border is...violet</DIV>

-left -right -top -bottom border

The properties of each border can be declared separately.
Example:

.h { border-left: 2px solid red; }
.i { border-left: 2px solid; border-right: 2px solid; }
.l { border-top: 2px dotted; border-bottom: 2px dotted; }

<DIV class="h">The left border is red</DIV>


<DIV class="i">Look the left and right borders</DIV>


<DIV class="l">Look the top and bottom borders</DIV>

Table border collapsing

Table cells may have separated borders or joined borders,
depending the setting of the border-collapse property.

Declaring the collapse value, the cell borders will be joined toghether (as a grid).

TABLE { border-collapse: collapse; }
TD { border: 1px solid black; }

Cell 1	Cell 2
Cell 3	Cell 4

Declaring the separate value, the cell borders will be separated.

TABLE { border-collapse: separate; }
TD { border: 1px solid black; }

Cell 1	Cell 2
Cell 3	Cell 4

Next page :

fonts and their style, size, and colour.