CSS border Property
The border shorthand property sets an element’s border width, style, and color in a single declaration.
Description & Usage
The border property draws a decorative or structural line around an element, situated between padding and margin layers.
It is a shorthand that sets border-width, border-style, and border-color simultaneously. Without specifying a border-style (such as solid, dashed, or dotted), no border will be rendered.
Borders add to element dimensions unless box-sizing is set to border-box.
Property Specifications
| Property Feature | Specification |
|---|---|
| Category | Box Model |
| Initial Value | medium none currentcolor |
| Inherited | No (not inherited) |
| Applies To | All elements |
Syntax
border: <border-width> <border-style> <border-color>;Property Values
| Value | Description |
|---|---|
| 1px solid #cbd5e1 | Thin solid gray border. |
| 2px dashed #3b82f6 | Dashed blue border. |
Code Examples
Card Border Highlight
.card {
border: 1px solid #e2e8f0;
border-radius: 8px;
}
Creates a clean modern card container outline.