The border property adds a border to an element.
Borders can vary in width, line style, and color.
Three different border styles.
<style>
.mydiv {
padding: 15px;
margin: 15px 0;
}
</style>
<div class="mydiv" style="border: 3px solid steelblue">
3px solid steelblue border
</div>
<div class="mydiv" style="border: 5px double lightblue">
5px double lightblue border
</div>
<div class="mydiv" style="border: 3px dashed red">
3px dashed red border
</div>
The border property is a shorthand for:
If the border-color is not set, it will inherit the text's color.
If the border-width is not set, the default will be set to medium or 1px.
border: border-width border-style border-color |
initial | inherit;
| Value | Description |
|---|---|
| border-width | Border width. Default is medium (1px). |
| border-style | Border style. Default is none. |
| border-color | Border color. Default will inherit text color. |
initial |
Sets the value to its default value. |
inherit |
Inherits the value from its parent element. |
Instead of a color, an image can also be used to create a border.
<style>
.border-image {
padding: 20px;
border: 20px solid transparent;
border-image: url(/img/css/wheatfield-with-crows.jpg) 100 round;
}
</style>
<div class="border-image">
A element with an image border.
</div>
For details on border-image see our CSS border-image Property Reference.
This table shows when border support started for each browser.
 Chrome
|
1.0 | Dec 2008 |
 Firefox
|
1.0 | Nov 2004 |
 IE/Edge
|
4.0 | Sep 1997 |
 Opera
|
3.5 | Nov 1998 |
 Safari
|
1.0 | Jun 2003 |
