CSS Border

The border shorthand property sets all the border properties in one declaration and is composed of the border-width, border-style, and border-color properties.

This property has the following syntax:

border: width style color;

Note: Any values not specified are set to their default properties.

Property Values

Value Description
border-width Specifies the width of the border. See border-width for possible values
border-style Specifies the style of the border. See border-style for possible values
border-color Specifies the color of the border. See border-color for possible values
inherit1 Specifies that the value of the property should be inherited from the parent element

Examples

This example sets the width, style, and color of all four borders.

p {
  border:5px solid blue;
}

The Following is the result of the above example:

border:5px solid blue;

border-top

The border-top property sets all the top border properties in one declaration and is composed of the border-top-width, border-top-style, and border-top-color properties.

This property has the following syntax:

border-top: width style color;

Note: Any values not specified are set to their default properties.

Property Values

Value Description
border-top-width Specifies the width of the top border. See border-top-width for possible values
border-top-style Specifies the style of the top border. See border-top-style for possible values
border-top-color Specifies the color of the top border. See border-top-color for possible values
inherit1 Specifies that the value of the property should be inherited from the parent element

Examples

The following example shows the basic use of this property:

p {
  border-style:solid;
  border-top:medium dotted blue;
}

The Following is the result of the above example:

border-top:medium dotted blue;

border-right

The border-right property sets all the right border properties in one declaration and is composed of the border-right-width, border-right-style, and border-right-color properties.

This property has the following syntax:

border-right: width style color;

Note: Any values not specified are set to their default properties.

Property Values

Value Description
border-right-width Specifies the width of the right border. See border-right-width for possible values
border-right-style Specifies the style of the right border. See border-right-style for possible values
border-right-color Specifies the color of the right border. See border-right-color for possible values
inherit1 Specifies that the value of the property should be inherited from the parent element

Examples

The following example shows the basic use of this property:

p {
  border-style:solid;
  border-right:medium dotted blue;
}

The Following is the result of the above example:

border-right:medium dotted blue;

border-bottom

The border-bottom property sets all of the bottom border properties in one declaration and is composed of the border-bottom-width, border-bottom-style, and border-bottom-color properties.

This property has the following syntax:

border-bottom: width style color;

Note: Any values not specified are set to their default properties.

Property Values

Value Description
border-bottom-width Specifies the width of the bottom border. See border-bottom-width for possible values
border-bottom-style Specifies the style of the bottom border. See border-bottom-style for possible values
border-bottom-color Specifies the color of the bottom border. See border-bottom-color for possible values
inherit1 Specifies that the value of the property should be inherited from the parent element

Examples

The following example shows the basic use of this property:

p {
  border-style:solid;
  border-bottom:medium dotted blue;
}

The Following is the result of the above example:

border-bottom:medium dotted blue;

border-left

The border-left property sets all the left border properties in one declaration and is composed of the border-left-width, border-left-style, and border-left-color properties.

This property has the following syntax:

border-left: width style color;

Note: Any values not specified are set to their default properties.

Property Values

Value Description
border-left-width Specifies the width of the left border. See border-left-width for possible values
border-left-style Specifies the style of the left border. See border-left-style for possible values
border-left-color Specifies the color of the left border. See border-left-color for possible values
inherit1 Specifies that the value of the property should be inherited from the parent element

Examples

The following example shows the basic use of this property:

p {
  border-style:solid;
  border-left:medium dotted blue;
}

The Following is the result of the above example:

border-left:medium dotted blue;