Borders
The border CSS property sets the color, style, and width of the line around an element.
Overview
The border CSS property sets the color, style, and width of the line around an element.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 1 | 12 | 1 | 1 | 18 | 1 | |
| Other | ||||||
| The border-bottom shorthand CSS property sets an element's bottom border. It sets the values of border-bottom-width, border-bottom-style and border-bottom-color. | 1 | 12 | 1 | 1 | 18 | 1 |
| The border-bottom-color CSS property sets the color of an element's bottom border. It can also be set with the shorthand CSS properties border-color or border-bottom. | 1 | 12 | 1 | 1 | 18 | 1 |
| CSS property | ||||||
transparent | 1 | 12 | 1 | 1 | 18 | 1 |
| Other | ||||||
| The border-bottom-style CSS property sets the line style of an element's bottom border. | 1 | 12 | 1 | 1 | 18 | 1 |
| CSS property | ||||||
dashed | 1 | 12 | 1 | 1 | 18 | 1 |
dotted | 1 | 12 | 1 | 1 | 18 | 1 |
double | 1 | 12 | 1 | 1 | 18 | 1 |
groove | 1 | 12 | 1 | 1 | 18 | 1 |
hidden | 1 | 12 | 1 | 1 | 18 | 1 |
inset | 1 | 12 | 1 | 1 | 18 | 1 |
none | 1 | 12 | 1 | 1 | 18 | 1 |
outset | 1 | 12 | 1 | 1 | 18 | 1 |
ridge | 1 | 12 | 1 | 1 | 18 | 1 |
solid | 1 | 12 | 1 | 1 | 18 | 1 |
| Other | ||||||
| The border-bottom-width CSS property sets the width of the bottom border of an element. | 1 | 12 | 1 | 1 | 18 | 1 |
| CSS property | ||||||
medium | 1 | 12 | 1 | 1 | 18 | 1 |
thick | 1 | 12 | 1 | 1 | 18 | 1 |
thin | 1 | 12 | 1 | 1 | 18 | 1 |
dashed | 1 | 12 | 1 | 1 | 18 | 1 |
dotted | 1 | 12 | 1 | 1 | 18 | 1 |
double | 1 | 12 | 1 | 1 | 18 | 1 |
groove | 1 | 12 | 1 | 1 | 18 | 1 |
hidden | 1 | 12 | 1 | 1 | 18 | 1 |
inset | 1 | 12 | 1 | 1 | 18 | 1 |
medium | 1 | 12 | 1 | 1 | 18 | 1 |
none | 1 | 12 | 1 | 1 | 18 | 1 |
outset | 1 | 12 | 1 | 1 | 18 | 1 |
ridge | 1 | 12 | 1 | 1 | 18 | 1 |
solid | 1 | 12 | 1 | 1 | 18 | 1 |
thick | 1 | 12 | 1 | 1 | 18 | 1 |
thin | 1 | 12 | 1 | 1 | 18 | 1 |
transparent | 1 | 12 | 1 | 1 | 18 | 1 |
| Other | ||||||
| The border-color shorthand CSS property sets the color of an element's border. | 1 | 12 | 1 | 1 | 18 | 1 |
| CSS property | ||||||
transparent | 1 | 12 | 1 | 1 | 18 | 1 |
| Other | ||||||
| The border-left shorthand CSS property sets all the properties of an element's left border. | 1 | 12 | 1 | 1 | 18 | 1 |
| The border-left-color CSS property sets the color of an element's left border. It can also be set with the shorthand CSS properties border-color or border-left. | 1 | 12 | 1 | 1 | 18 | 1 |
| CSS property | ||||||
transparent | 1 | 12 | 1 | 1 | 18 | 1 |
| Other | ||||||
| The border-left-style CSS property sets the line style of an element's left border. | 1 | 12 | 1 | 1 | 18 | 1 |
| CSS property | ||||||
dashed | 1 | 12 | 1 | 1 | 18 | 1 |
dotted | 1 | 12 | 1 | 1 | 18 | 1 |
double | 1 | 12 | 1 | 1 | 18 | 1 |
groove | 1 | 12 | 1 | 1 | 18 | 1 |
hidden | 1 | 12 | 1 | 1 | 18 | 1 |
inset | 1 | 12 | 1 | 1 | 18 | 1 |
none | 1 | 12 | 1 | 1 | 18 | 1 |
outset | 1 | 12 | 1 | 1 | 18 | 1 |
ridge | 1 | 12 | 1 | 1 | 18 | 1 |
solid | 1 | 12 | 1 | 1 | 18 | 1 |
| Other | ||||||
| The border-left-width CSS property sets the width of the left border of an element. | 1 | 12 | 1 | 1 | 18 | 1 |
| CSS property | ||||||
medium | 1 | 12 | 1 | 1 | 18 | 1 |
thick | 1 | 12 | 1 | 1 | 18 | 1 |
thin | 1 | 12 | 1 | 1 | 18 | 1 |
dashed | 1 | 12 | 1 | 1 | 18 | 1 |
dotted | 1 | 12 | 1 | 1 | 18 | 1 |
double | 1 | 12 | 1 | 1 | 18 | 1 |
groove | 1 | 12 | 1 | 1 | 18 | 1 |
hidden | 1 | 12 | 1 | 1 | 18 | 1 |
inset | 1 | 12 | 1 | 1 | 18 | 1 |
medium | 1 | 12 | 1 | 1 | 18 | 1 |
none | 1 | 12 | 1 | 1 | 18 | 1 |
outset | 1 | 12 | 1 | 1 | 18 | 1 |
ridge | 1 | 12 | 1 | 1 | 18 | 1 |
solid | 1 | 12 | 1 | 1 | 18 | 1 |
thick | 1 | 12 | 1 | 1 | 18 | 1 |
thin | 1 | 12 | 1 | 1 | 18 | 1 |
transparent | 1 | 12 | 1 | 1 | 18 | 1 |
| Other | ||||||
| The border-right shorthand CSS property sets all the properties of an element's right border. | 1 | 12 | 1 | 1 | 18 | 1 |
| The border-right-color CSS property sets the color of an element's right border. It can also be set with the shorthand CSS properties border-color or border-right. | 1 | 12 | 1 | 1 | 18 | 1 |
| CSS property | ||||||
transparent | 1 | 12 | 1 | 1 | 18 | 1 |
| Other | ||||||
| The border-right-style CSS property sets the line style of an element's right border. | 1 | 12 | 1 | 1 | 18 | 1 |
| CSS property | ||||||
dashed | 1 | 12 | 1 | 1 | 18 | 1 |
dotted | 1 | 12 | 1 | 1 | 18 | 1 |
double | 1 | 12 | 1 | 1 | 18 | 1 |
groove | 1 | 12 | 1 | 1 | 18 | 1 |
hidden | 1 | 12 | 1 | 1 | 18 | 1 |
inset | 1 | 12 | 1 | 1 | 18 | 1 |
none | 1 | 12 | 1 | 1 | 18 | 1 |
outset | 1 | 12 | 1 | 1 | 18 | 1 |
ridge | 1 | 12 | 1 | 1 | 18 | 1 |
solid | 1 | 12 | 1 | 1 | 18 | 1 |
| Other | ||||||
| The border-right-width CSS property sets the width of the right border of an element. | 1 | 12 | 1 | 1 | 18 | 1 |
| CSS property | ||||||
medium | 1 | 12 | 1 | 1 | 18 | 1 |
thick | 1 | 12 | 1 | 1 | 18 | 1 |
thin | 1 | 12 | 1 | 1 | 18 | 1 |
dashed | 1 | 12 | 1 | 1 | 18 | 1 |
dotted | 1 | 12 | 1 | 1 | 18 | 1 |
double | 1 | 12 | 1 | 1 | 18 | 1 |
groove | 1 | 12 | 1 | 1 | 18 | 1 |
hidden | 1 | 12 | 1 | 1 | 18 | 1 |
inset | 1 | 12 | 1 | 1 | 18 | 1 |
medium | 1 | 12 | 1 | 1 | 18 | 1 |
none | 1 | 12 | 1 | 1 | 18 | 1 |
outset | 1 | 12 | 1 | 1 | 18 | 1 |
ridge | 1 | 12 | 1 | 1 | 18 | 1 |
solid | 1 | 12 | 1 | 1 | 18 | 1 |
thick | 1 | 12 | 1 | 1 | 18 | 1 |
thin | 1 | 12 | 1 | 1 | 18 | 1 |
transparent | 1 | 12 | 1 | 1 | 18 | 1 |
| Other | ||||||
| The border-style shorthand CSS property sets the line style for all four sides of an element's border. | 1 | 12 | 1 | 1 | 18 | 1 |
| CSS property | ||||||
dashed | 1 | 12 | 1 | 1 | 18 | 1 |
dotted | 1 | 12 | 1 | 1 | 18 | 1 |
double | 1 | 12 | 1 | 1 | 18 | 1 |
groove | 1 | 12 | 1 | 1 | 18 | 1 |
hidden | 1 | 12 | 1 | 1 | 18 | 1 |
inset | 1 | 12 | 1 | 1 | 18 | 1 |
none | 1 | 12 | 1 | 1 | 18 | 1 |
outset | 1 | 12 | 1 | 1 | 18 | 1 |
ridge | 1 | 12 | 1 | 1 | 18 | 1 |
solid | 1 | 12 | 1 | 1 | 18 | 1 |
| Other | ||||||
| The border-top shorthand CSS property sets all the properties of an element's top border. | 1 | 12 | 1 | 1 | 18 | 1 |
| The border-top-color CSS property sets the color of an element's top border. It can also be set with the shorthand CSS properties border-color or border-top. | 1 | 12 | 1 | 1 | 18 | 1 |
| CSS property | ||||||
transparent | 1 | 12 | 1 | 1 | 18 | 1 |
| Other | ||||||
| The border-top-style CSS property sets the line style of an element's top border. | 1 | 12 | 1 | 1 | 18 | 1 |
| CSS property | ||||||
dashed | 1 | 12 | 1 | 1 | 18 | 1 |
dotted | 1 | 12 | 1 | 1 | 18 | 1 |
double | 1 | 12 | 1 | 1 | 18 | 1 |
groove | 1 | 12 | 1 | 1 | 18 | 1 |
hidden | 1 | 12 | 1 | 1 | 18 | 1 |
inset | 1 | 12 | 1 | 1 | 18 | 1 |
none | 1 | 12 | 1 | 1 | 18 | 1 |
outset | 1 | 12 | 1 | 1 | 18 | 1 |
ridge | 1 | 12 | 1 | 1 | 18 | 1 |
solid | 1 | 12 | 1 | 1 | 18 | 1 |
| Other | ||||||
| The border-top-width CSS property sets the width of the top border of an element. | 1 | 12 | 1 | 1 | 18 | 1 |
| CSS property | ||||||
medium | 1 | 12 | 1 | 1 | 18 | 1 |
thick | 1 | 12 | 1 | 1 | 18 | 1 |
thin | 1 | 12 | 1 | 1 | 18 | 1 |
dashed | 1 | 12 | 1 | 1 | 18 | 1 |
dotted | 1 | 12 | 1 | 1 | 18 | 1 |
double | 1 | 12 | 1 | 1 | 18 | 1 |
groove | 1 | 12 | 1 | 1 | 18 | 1 |
hidden | 1 | 12 | 1 | 1 | 18 | 1 |
inset | 1 | 12 | 1 | 1 | 18 | 1 |
medium | 1 | 12 | 1 | 1 | 18 | 1 |
none | 1 | 12 | 1 | 1 | 18 | 1 |
outset | 1 | 12 | 1 | 1 | 18 | 1 |
ridge | 1 | 12 | 1 | 1 | 18 | 1 |
solid | 1 | 12 | 1 | 1 | 18 | 1 |
thick | 1 | 12 | 1 | 1 | 18 | 1 |
thin | 1 | 12 | 1 | 1 | 18 | 1 |
transparent | 1 | 12 | 1 | 1 | 18 | 1 |
| Other | ||||||
| The border-width shorthand CSS property sets the width of an element's border. | 1 | 12 | 1 | 1 | 18 | 3 |
| CSS property | ||||||
medium | 1 | 12 | 1 | 1 | 18 | 3 |
thick | 1 | 12 | 1 | 1 | 18 | 3 |
thin | 1 | 12 | 1 | 1 | 18 | 3 |
dashed | 1 | 12 | 1 | 1 | 18 | 1 |
dotted | 1 | 12 | 1 | 1 | 18 | 1 |
double | 1 | 12 | 1 | 1 | 18 | 1 |
groove | 1 | 12 | 1 | 1 | 18 | 1 |
hidden | 1 | 12 | 1 | 1 | 18 | 1 |
inset | 1 | 12 | 1 | 1 | 18 | 1 |
medium | 1 | 12 | 1 | 1 | 18 | 1 |
none | 1 | 12 | 1 | 1 | 18 | 1 |
outset | 1 | 12 | 1 | 1 | 18 | 1 |
ridge | 1 | 12 | 1 | 1 | 18 | 1 |
solid | 1 | 12 | 1 | 1 | 18 | 1 |
thick | 1 | 12 | 1 | 1 | 18 | 1 |
thin | 1 | 12 | 1 | 1 | 18 | 1 |
transparent | 1 | 12 | 1 | 1 | 18 | 1 |
| Other | ||||||
| The enumerated value type represents keyword values that define the style of a line, or the lack of a line. The keyword values are used in the following longhand and shorthand border and column properties: | 1 | 12 | 1 | 1 | 18 | 3 |
- Before Firefox 50, border styles of rounded corners (with `border-radius`) were always rendered as if `border-bottom-style` was `solid`. This has been fixed in Firefox 50.
- Before Firefox 50, border styles of rounded corners (with `border-radius`) were always rendered as if `border-bottom-style` was `solid`. This has been fixed in Firefox 50.
- Before Firefox 50, border styles of rounded corners (with `border-radius`) were always rendered as if `border-bottom-style` was `solid`. This has been fixed in Firefox 50.
- Before Firefox 50, border styles of rounded corners were always rendered as if `border-style` was solid. This has been fixed in Firefox 50.
- Before Firefox 50, border styles of rounded corners (with `border-radius`) were always rendered as if `border-top-style` was `solid`. This has been fixed in Firefox 50.
Syntax
.card {
border: 1px solid #e0e0e0;
border-radius: 8px;
}
.divider {
border-bottom: 2px dashed #ccc;
}Live demo
Use cases
Using Borders
The border CSS property sets the color, style, and width of the line around an element.
Cautions
- May not be supported in older browsers.
Accessibility
- Make sure visual changes are conveyed appropriately to assistive technology.
Related links
Powered by web-features