The border properties define the width of the border area around the box, as well as the border's style and color.

Border width

The width of the border is expressed via properties border-top-width, border-right-width, border-bottom-width, border-left-width and a shorthand property border-width.

The value border-width may be expressed as an explicit value in pixels, or as a relative value expressed as thin, medium or thick. Negative values are not accepted.

The border-top-width, border-right-width, border-bottom-width and border-left-width properties contain following information:

  1. value: <border-width> or inherit;
  2. initial: medium;
  3. applies to: all elements;
  4. inherited: no;
  5. percentages: N/A;
  6. media: visual;
  7. computed value: '0' if the style is set to 'none' or 'hidden', otherwise the absolute length.

The border-width property contains following information:

  1. value: <border-width>{1,4} or inherit;
  2. initial: depends on individual settings;
  3. applies to: all elements;
  4. inherited: no;
  5. percentages: N/A;
  6. media: visual;
  7. computed value: depends on individual settings.

The border-width property is a shorthand for all other properties.

This property may have a minimum of one value and maximum of four. If there is only one value, it applied to all four sides of the border area. If there are two values, the top and the bottom sides will be set to the first number, while the right and the left side will be set to the second. In case of assigning three values, the top is set to the first value, the left and right are set to the second and the bottom is set to the third. Naturally in case of assigning all four values they will be applied to all four sides respectively.

Border color

The color of the border is expressed via properties border-top-color, border-right-color, border-bottom-color, border-left-color and a shorthand property border-color.

The border-top-color, border-right-color, border-bottom-color and border-left-color properties contain following information:

  1. value: <color>, transparent or inherit;
  2. initial: value of the color property;
  3. applies to: all elements;
  4. inherited: no;
  5. percentages: N/A;
  6. media: visual;
  7. computed value: color property value, otherwise as specified.

The border-color property contains following information:

  1. value: [<color>, transparent]{1,4} or inherit;
  2. initial: depends on individual settings;
  3. applies to: all elements;
  4. inherited: no;
  5. percentages: N/A;
  6. media: visual;
  7. computed value: depends on individual settings.

The border-color property is a shorthand for all other properties. If less than four values are expressed the same rules apply as mentioned above within the border-width property section.

If the value is set to transparent, the border will be invisible but it will exist if the width has been set. In case of the border-color value being skipped, the color value will be computed from the element's color property.

Border style

The style of the border is expressed via properties border-top-style, border-right-style, border-bottom-style, border-left-style and a shorthand property border-style.

The value border-style may be assigned to these types:

  • none; no border will be rendered (width is '0');
  • hidden; same as none except when there a situation of a border conflict when rendering tables;
  • dotted; series of dots;
  • dashed; series dashes (short lines);
  • solid; single line;
  • double; double line (the space between lines is equal to their width set, minimum width is '3px');
  • groove; border looks carved into canvas (minimum width is '2px');
  • ridge; border looks like it's coming out of canvas (opposite of 'groove');
  • inset; box looks embedded in canvas (minimum width is '2px');
  • outset; box looks like it's coming out of canvas (opposite of 'inset').

The last for value types, groove, ridge, inset and outset are achieved by using a gradient of the set color value in order to achieve proper shadow effect; therefore the results highly depend on the browser rendering it.

The border-top-style, border-right-style, border-bottom-style and border-left-style properties contain following information:

  1. value: <border-style>{1,4} or inherit;
  2. initial: depends on individual settings;
  3. applies to: all elements;
  4. inherited: no;
  5. percentages: N/A;
  6. media: visual;
  7. computed value: depends on individual settings.

The border-style property is a shorthand for all other properties. If less than four values are expressed, the same rules apply as mentioned above within the border-width property section.

Border shorthand properties

The shorthand border properties for width color and style are border-top, border-right, border-bottom, border-left and the main shorthand property border.

The border-top, border-right, border-bottom, border-left and border properties contain following information:

  1. value: [<border-width> <border-top-color> <border-style>] or inherit;
  2. initial: depends on individual settings;
  3. applies to: all elements;
  4. inherited: no;
  5. percentages: N/A;
  6. media: visual;
  7. computed value: depends on individual settings.

The border property is a shorthand for setting the same width, color and style for all four borders of the box. To set different values to the individual border sides other shorthand properties may be used.

Example

Example of CSS border properties:

 

›› go to examples ››