border
Table of Contents
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-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-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-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-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: