Borders

The Border Properties

K04a- (6:16)

Up to three properties may be specified for a border:

Width
Style - required, otherwise the border will not be visible
Color

Border property values

width

Specific sizes can be used with any measurement unit.
Do not use % percentage - it prevents the border from displaying.
Keywords
- thin
- medium
- thick
Keyword values are interpreted differently by different browsers. Thin, medium, and thick are interpreted as 1px, 2px, and 3px by Firefox. Internet Explorer doubles those amounts.

style – a style must be specified or there will be no border

solid
dashed
dotted
double – Note that the width of the two borders are equal to the total border-width value.
groove
ridge
inset
outset
none
inherit

color

Note that if no color is specified, the border will be the same as the element's text.

The background appears behind the border

In this example, you can see that the background appears behind the border:

Note that the background
goes behind the border.

Solid Border

Dashed Border

Dotted Border

Double Border

Groove Border

Ridge Border

Inset Border

Outset Border

Applying Specific Properties To Specific Sides

K04b- (1:05)

The following links go to further information from the Worldwide Web Consortium.

Applying borders by using border-sides-value and properties

Examples:

       border-right-width: 3em;
       border-top-style: ridge;
       border-bottom-color: #B73C9A;