Borders in Web Pages

Borders can add an attractive appearance to box type text displays like tables, divisions, paragraphs, lists and blockquotes.

The basic properties are:

border-style

dashed,dotted,double,groove,solid,inset,outset

border-color

red, #FF0000, #F00

border-width

thin, thick, medium, #px

Border settings can be defined using inline, embedded or linked style sheets.

Borders In Paragraphs

The rain in spain falls mainly on the plain. If it falls on the plain in spain, where does it fall in France?

<p STYLE="border-style: dotted ;border-color :red;border-width :medium">The rain in spain falls mainly on the plain. If it falls on the plain in spain, where does it fall in France?</p>

In Blockquotes

The blockquote can be used to offset a block of text. By default it is indented on the left and right margins. The appearance can be improved adding the padding property to the style sheet.

<blockquote STYLE="border-style: solid ;border-color : green;border-width :thick">The blockquote can be used to offset a block of text. By default it is indented on the left and right margins. The appearance can be improved adding the padding property to the style sheet.</blockquote>

Short Cuts and Selected Sides

Inline code for setting borders can be shortened by using the following code:

STYLE="border: dashed blue thin"

The properties are defined in the same order as above: style, color and width.

NOTE: width can be defined in pixels as: 1px, 2px, etc.

Suppose we only wanted to display borders on one or two sides of a block.

The following code could be used:
Top: Style="border-top : solid #000000 2px"
Right side: Style="border-right : solid #000000 2px"
Bottom: Style="border-bottom : solid #000000 2px"
Left side: Style="border-left : solid #000000 2px"

For multiple sides the definitions should be separated using a semicolon.
Bottom and Top: Style="border-bottom : solid #000000 2px;border-top : solid #000000 2px"

You can also do this

style="border-style: solid;
border-color: #ffffff #0000ff #ff0000 #000000;
border-width: 4px 8px 4px 8px">

 

See Also: Round Corners/ Border Radius