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.