CSS border Property
Example
Set the style for all four borders:
p {
border: 5px solid red;
}
Definition and Usage
The border property is a shorthand property for setting the individual border properties.
The CSS border property is used to specify the style, width, and color of an element's border.
The properties that can be set, in order, are: border-width, border-style, and border-color.
You can also set only one value, for example, border: #FF0000; is correct, and other values will be set to their initial values.
Syntax
You can specify the border property using one, two, or three values from the list below. The order of the values does not matter:
/* Border style */
border: solid;
/* Border width | Border style */
border: 2px dotted;
/* Border style | Border color */
border: outset #f33;
/* Border width | Border style | Border color */
border: medium dashed green;
/* Global values */
border: inherit;
border: initial;
border: unset;
Note: If the border style is not defined, it will not be visible because the default style is none.
| Default value: | not specified |
|---|---|
| Inherited: | no |
| --- | --- |
| Version: | CSS1 |
| --- | --- |
| JavaScript syntax: | object.style.border="3px solid blue" |
| --- | --- |
Browser Support
The numbers in the table specify the first browser version that fully supports the property.
| Property | |||||
|---|---|---|---|---|---|
| border | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
Property Values
| Value | Description |
|---|---|
| border-width | Specifies the width of the border |
| border-style | Specifies the style of the border |
| border-color | Specifies the color of the border |
| inherit | Specifies that the border should be inherited from the parent element |
Related Articles
CSS Tutorial: CSS Border