Quick HTML


Paragraphs, headings, DIV and SPAN sections, tables and cell tables, can have borders.


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>
This border is invisible

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

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

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

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

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


The border width can be can be thin, medium, thick, or expressed in pixel.
.a { border: thin solid; }
.b { border: medium solid; }
.c { border: thick solid; }
.d { border: 1px solid; }
<DIV class="a">This border is thin</DIV>
This border is thin

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

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

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


The border colour can be can be expressed with a colour name, or in RGB code, or in HEX code.
.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>
This border is red

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

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

-left -right -top -bottom border

The properties of each border can be declared separately.
.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>
The left border is red

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

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

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.

|   Back   |   Index   |   Next   |