border
CSS border Property
The CSS border property is a shorthand property that sets the values of border-width, border-style and border-color for all four sides of an element. Negative values are not allowed.
The border shorthand property is used when you want to make all four sides the same. You can change borders with the help of border-width, border-style, and border-color properties, which can set different values for each side.
If the value is not defined, the borders are invisible.
| 类目 | 类目 |
|---|---|
| Initial Value | medium none currentColor |
| Applies to | All elements. It also applies to ::first-letter. |
| Inherited | No. |
| Animatable | Yes. Width, color and style of the border are animatable. |
| Version | CSS1 |
| DOM Syntax | object.style.border = “5px solid green”; |
Syntax
Syntax
border: border-width border-style border-color | initial | inherit;
Example of the border property:
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
p {
border: thick solid #8ebf42;
padding: 5px;
}
</style>
</head>
<body>
<h2>Border property example</h2>
<p>This paragraph's border is set to "thick solid green".</p>
</body>
</html>
Result
See another example where the style of the border is dashed, the width is set to 3px and the color of the border is blue.
Example of the border property with the “dashed” value:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
border: 3px dashed #1c87c9;
padding: 10px;
}
</style>
</head>
<body>
<h2>Border property example</h2>
<p>This paragraph's border is set to "3px dashed blue".</p>
</body>
</html>
Let’s see another example with the border-color where 3 values are applied. The first one is applied to the top border, the second one to the right and left, and the third one to the bottom.
Example of the border property with 3 values:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
border: 3px solid;
border-color: #1c87c9 #666 #8ebf42;
padding: 5px;
}
</style>
</head>
<body>
<h2>Border property example</h2>
<div>Here 3 values are applied to the border-color property.</div>
</body>
</html>
Example of the border-style property:
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
p,
div {
padding: 5px;
}
.border1 {
border: 5px solid #ccc;
}
.border2 {
border: 5px dotted #1c87c9;
}
div {
border: thick double #8ebf42;
}
</style>
</head>
<body>
<h2>Border property example</h2>
<p class="border1">A heading with a solid gray border.</p>
<p class="border2">A heading with a dotted blue border.</p>
<div>A div element with a thick double green border.</div>
</body>
</html>
Values
Values
| Value | Description |
|---|---|
| border-width | Defines the width of the border. Default value is “medium”. |
| border-style | Defines the style of the border. Default value is “none”. |
| border-color | Defines the color of the border. Default value is the current color of the element . |
| initial | Sets the property to its default value. |
| inherit | Inherits the property from its parent element. |