English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
the element's (Border) border surrounds the padding and content.
CSS border properties allow you to define the border area of the box. The border can be a predefined style, such as solid, double, dashed, etc.,can also be an image. The next section will introduce how to set various properties to define the border style (border-style), color (border-color) and thickness (border-width).
border-widthattribute specifies the width of the border area. It is a shorthand attribute used to set the thickness of all four sides of the element border at the same time.
p {
border-width: medium 10px thick 15px;
}Test and See‹/›Note:If border-If the width is missing or not specified, border-width uses the default value (medium).
Theborder-styleattribute sets the style of the box border, for example: solid, dotted, etc. It is a shorthand attribute used to set the line type of all four sides of the element border.
This border-The style attribute can take one of the following values: none, hidden, dashed, dotted, double, groove, inset, outset, ridge, and solid.
none: No border.
dotted: Defines a dotted line border
dashed: Defines a dashed line border
solid: Defines a solid line border
double: defines two borders. The width of the two borders is the same as border-width values are the same
groove: defines3D groove border. The effect depends on the border color value
ridge: defines3D ridge border. The effect depends on the border color value
inset: defines3D inset border. The effect depends on the border color value
outset: defines3D outset border. The effect depends on the border color value
p {
border-style: dotted;
}Test and See‹/›Theborder-colorThe attribute specifiescolorThe border of the box. This is also the shorthand attribute used to set the color of all four sides of the element's border.
p {
border-style: solid;
border-color: #ff0000;
}Test and See‹/›Note:border-color If the attribute is used alone, the attribute will not take effect. Use border-The style attribute first sets the border.
Theborder CSS properties are shorthand attributes that set one or more separate border properties, border-style, border-width and border-color in a single rule.
p {
border: 5px solid #ff4500;
}Test and See‹/›If the value of a single border property is ignored or not specified when setting the border shorthand property, the default value of the property (if any) will be used.
Note:border-colorWhen setting the element's border, if the attribute value is missing or not specified (for example border: 5px solid;), then the element'scolorThe attribute will be used as the value of border-color.
In this example, the border will be5px black solid:
p {
color: black;
border: 5px solid;
}Test and See‹/›However, in the presence of border-In the case of the style attribute, omitting the value will not display any border because at this time border-The default value of the style attribute is none.
In the following example, there will be no border:
p {
border: 5px #00ff00;
}Test and See‹/›