Border Width Property
Last updated: 2026-09-13
border-width Border Width Property
border-width sets the thickness of an element's border. You can use the predefined keywords thin, medium, and thick, or explicit length values such as px or em. Used on its own, it controls only the width, leaving the style and color untouched.
| Category | |
|---|---|
| Initial Value | medium |
| Inherited | No |
| Applies To | all |
| Animation Type | length |
| CSS Version | CSS1 |
| Status | Standard |
📝 Syntax
border-width: thin | medium | thick | <length>{1,4};⚙️ Values
| Value | Type | Description |
|---|---|---|
thin | medium | thick | Keyword | Predefined border-width keywords |
<length> | Type | Explicit border width |
▶ Example
Edit the code below and see the live result in the playground:
🌐 Browser Support
| Browser |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| border-width | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| Supported in all major browsers | |||||
Tip： border-width accepts 1 to 4 values for the top, right, bottom, and left edges, following the same rules as margin and padding.
❓ FAQ
QHow many pixels are thin, medium, and thick?
AThe spec does not define exact pixel sizes for these keywords — each browser implements them slightly differently. In practice, medium is roughly 3–4px (and is also the default border width), thin about 1px, and thick about 5–6px. Rendering may vary between browsers, so use an explicit length like 2px when you need precise control.
QWhy doesn't a border show even though I set border-width?
ABecause the default value of border-style is none — without a style, no border is drawn regardless of width. You must also set border-style (e.g. solid) and a color so all three are present. Debug in order: first confirm border-style, then check border-width is not 0, and finally verify the color.
QWhat do the 1 to 4 values of border-width mean?
AThey follow the exact same rules as margin and padding: one value applies to all four sides; two values map to top/bottom and left/right; three values map to top, left/right, and bottom; four values apply clockwise from the top (top, right, bottom, left). For example, border-width: 2px 4px gives 2px top/bottom and 4px left/right, or use border-top-width and friends for a single side.
QDoes border-width support percentages?
ANo. border-width only accepts the keywords thin, medium, thick or length units (px, em, rem, vw, calc(), and so on); percentage values are treated as invalid declarations and ignored. Relative units like em/rem scale with the font size, which suits responsive layouts; use px when you need a fixed thickness.
🏷️ Related Properties
💡 Related Cases
📚 Related Tutorials
