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¶
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>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¶
| Value | Description |
|---|---|
| border-width | Defines the width of the border. The default value is "medium". |
| border-style | Defines the style of the border. The default value is "none". |
| border-color | Defines the color of the border. The 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. |
0 Comments
CAN FEEDBACK
Emoji