border
The border shorthand sets the width, style, and color of all four borders of an element.
Syntax
border: <width> <style> <color>; /* e.g. 1px solid #ccc */
Examples
.card {
border: 1px solid oklch(0.9 0 0);
border-radius: 12px;
}
.input:focus { border: 2px solid royalblue; }
Output
Renders a card with a thin light-grey rounded border and a thicker blue border on focused inputs.
Notes
border-style is required for a border to appear (the default is none). Style individual sides with border-top, etc. Borders add to box size unless box-sizing:border-box is set.
Browser & runtime support
| Environment | Since version |
|---|---|
| chrome | 1.0 |
| firefox | 1.0 |
| safari | 1.0 |
| edge | 12 |