Borders
The border shorthand CSS property sets an element's border. It sets the values of border-width, border-style, and border-color.
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 shorthand CSS property sets an element's border.
Cautions
- May not be supported in older browsers.
Accessibility
- Make sure visual changes are conveyed appropriately to assistive technology.