Border Shorthand Property
Last updated: 2026-09-13
border Border Shorthand Property
The border shorthand property is one of the most commonly used in CSS, letting you set an element's border width, style, and color in a single declaration. The border wraps around the element's content, just inside the padding, and is a key part of the box model. With border you can quickly give any element a visible outline.
| Category | |
|---|---|
| Initial Value | medium none currentcolor |
| Inherited | No |
| Applies To | all |
| Animation Type | shadow |
| CSS Version | CSS1 |
| Status | Standard |
📝 Syntax
border: <border-width> || <border-style> || <color>;⚙️ Values
| Value | Type | Description |
|---|---|---|
<border-width> || <border-style> || <color> | Value | Shorthand for border width, style, and color |
▶ Example
Edit the code below and see the live result in the playground:
🌐 Browser Support
| Browser |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| border | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| Supported in all major browsers | |||||
Tip： The border shorthand sets all four sides at once. To style a single side, use border-top, border-right, border-bottom, or border-left instead.
Warning： The border shorthand resets any previously set border-width, border-style, or border-color. If you only need to change one of them, prefer the corresponding longhand property.
❓ FAQ
QWhat is the difference between border and outline?
Aborder is part of the box model and is drawn around the content and padding, so it takes up space and affects element size and layout. outline is drawn outside the border, takes up no space, and does not affect layout, which makes it ideal for keyboard focus indicators. Use border for decorative borders and outline for space-free visual cues, especially for focus states.
QWhy can't I see a border after setting it?
AThe most common cause is forgetting to set border-style. Its default value is none, so you must explicitly specify a style (like solid or dashed) for a border to render. Also check that border-width is not 0 and that no other rule overrides the color. The simplest fix is to use the border shorthand to set all three at once.
QDoes the order of the three values in the border shorthand matter?
AThere is no strict requirement — browsers identify values by type automatically — but the conventional order is width, then style, then color, e.g. border: 1px solid #ccc;. Note that omitting the style defaults to none (no visible border), and omitting the color defaults to currentcolor (the text color). Keeping a consistent order also makes the code easier to maintain.
QHow do I set different borders on the four sides?
AUse the per-side shorthands border-top, border-right, border-bottom, and border-left, or set the whole border first and then override individual sides. For example, border: 1px solid #ddd; border-bottom: 3px solid #e74c3c; produces a highlighted bottom border with a regular border on the other three sides.
🏷️ Related Properties
💡 Related Cases
📚 Related Tutorials
