Border Properties

A border may be specified around an element or one each side individually. Any margin spacing appears outside the border while any padding appears inside the border.

border: <#width#> <#style#> <#color#>;

The border property is a shorthand for specifying border-width, border-style and border-color

border-top: <#width#> <#style#> <#color#>;

The border-top property is a shorthand for specifying border-width-top, border-style-top and border-color-top

border-right: <#width#> <#style#> <#color#>;

The border-right property is a shorthand for specifying border-width-right, border-style-right and border-color-right

border-bottom: <#width#> <#style#> <#color#>;

The border-bottom property is a shorthand for specifying border-width-bottom, border-style-bottom and border-color-bottom

border-left: <#width#> <#style#> <#color#>;

The border-left property is a shorthand for specifying border-width-left, border-style-left and border-color-left

border-width

border-width: medium; (default)

border-width: thin;

border-width: thick;

border-width: nunits;

border-width: inherit;

Note that Firefox includes the border width in the height while Safari and Chrome add the border width to the height.

border-style

border-style: <#style#>;

border-style: <#top/bottom#> <#right/left#>;

border-style: <#top#> <#right/left#> <#bottom#>;

border-style: <#top#> <#right#> <#bottom#> <#left#>;

See the <div> tag tutorial and <div> tag examples for various examples of border styles

border-color: <#color#>;

Use the HTML Color Picker for an easy way to choose HTML colors.