CSS Reference
border
Draws a line around an element. Shorthand for width, style, and color.
Last updated: October 2026
Definition: The border property draws a line around an element. It is shorthand for border-width, border-style, and border-color. Borders are part of the box model — they take up space and affect layout.
🎬 Live Examples
Every style, plus border-radius in action.
💡 Every example above uses the same border shorthand syntax — only the values change.
Basic Syntax
/* Border shorthand: width | style | color */
.border {
border: 2px solid #3b82f6;
}
/* Style is required for the border to appear */
.border-missing {
border: 2px red; /* Does nothing without a style */
}Order doesn't matter in the shorthand — but the style must be present.
🎯 All border Sub-Properties
| Property | Purpose |
|---|---|
border | Shorthand for all three (width, style, color). |
border-width | Thickness: 1px, thin, medium, thick. |
border-style | solid, dashed, dotted, double, groove, ridge, inset, outset, none. |
border-color | Any color value. Defaults to the element's text color. |
border-radius | Rounds the corners. Separate from the border shorthand. |
border-top, -right, -bottom, -left | Set borders on individual sides. |
border-collapse | For tables — collapse or separate cell borders. |
The 10 border Styles
| Style | Look |
|---|---|
solid | Single solid line. Most common. |
dashed | Dashes. |
dotted | Dots. |
double | Two parallel lines. |
groove | 3D carved effect. |
ridge | 3D raised effect. |
inset | Looks pressed in. |
outset | Looks popping out. |
none | No border. |
hidden | Like none, but in tables it hides the shared border. |
Use solid 95% of the time. Others have niche uses.
border-radius — Rounded Corners
/* Uniform radius */
.card {
border-radius: 12px;
}
/* Pill shape */
.btn-pill {
border-radius: 9999px;
}
/* Circle (needs equal width and height) */
.avatar {
width: 60px;
height: 60px;
border-radius: 50%;
}
/* Top corners only */
.tabs {
border-radius: 8px 8px 0 0;
}The border-radius shorthand takes the same 1–4 value pattern as margin and padding — top-left, top-right, bottom-right, bottom-left.
Individual Sides
/* Only top border */
.section {
border-top: 2px solid #1e293b;
}
/* Only left accent border */
.quote {
border-left: 4px solid #3b82f6;
padding-left: 1rem;
}
/* Combining — border + border-top override */
.card {
border: 1px solid #1e293b;
border-top: 4px solid #3b82f6; /* Accent */
}Individual sides override the shorthand. This is how accent borders are built.
Common Border Patterns
/* Subtle border (dark mode) */
.card {
border: 1px solid #1e293b;
}
/* Hover border glow */
.card:hover {
border-color: #3b82f6;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
/* Focus ring (accessibility) */
button:focus-visible {
outline: 2px solid #3b82f6;
outline-offset: 2px;
}
/* Divider line */
hr,
.divider {
border: none;
border-top: 1px solid #1e293b;
margin: 1rem 0;
}
/* Input with error state */
input.error {
border: 2px solid #ef4444;
}
/* Success input */
input.success {
border: 2px solid #10b981;
}🎯 border vs outline vs box-shadow
| Feature | border | outline | box-shadow |
|---|---|---|---|
| Takes up space | Yes | No | No |
| Affects layout | Yes | No | No |
| Can be rounded | Yes (radius) | Rounded corners on modern browsers | Yes (via spread) |
| Follows border-radius | — | Sometimes | Yes |
| Common use | Card borders, dividers | Focus rings | Glow, elevation |
💡 Rule: Use border for permanent lines. Use outline for focus indicators. Use box-shadow for glow or soft elevation without affecting layout.
⚠️ Common Mistakes
- Forgetting the style value.
border: 2px reddoes nothing. You needborder: 2px solid red. - Assuming border is part of the width. By default, borders add to the element size. Use
box-sizing: border-boxto include it. - Using
borderfor focus rings. Useoutlineinstead — it doesn't affect layout, so the page doesn't shift on focus. - Setting border-radius without a border or background. border-radius alone does nothing if there's no visible box.
- Not testing dark mode. A border that works on white often looks wrong on black. Test both.
- Using
border: noneto remove focus outline. This is an accessibility failure. Useoutline: noneonly if you provide an alternative visible focus indicator. - Setting border-radius on a parent with overflow: hidden — the border-radius may not clip the children's corners. Use
overflow: hiddenon the rounded element.
♿ Accessibility Notes
- Never remove focus outlines without replacing them. Focus rings are essential for keyboard users.
- Border contrast matters. A border too similar to the background is invisible. Aim for 3:1 contrast for meaningful borders.
- Don't use borders alone to convey state. Combine with color + icon + text. Colorblind users may not distinguish.
- Use outline-offset for spacing.
outline-offset: 2pxkeeps the focus ring from overlapping the content. - Rounded corners are visual only. Screen readers don't announce them, so they aren't a way to convey information.
❓ Frequently Asked Questions
What is the CSS border property?
The border property draws a line around an element. It is a shorthand for border-width, border-style, and border-color. You can also use it to draw borders on individual sides.
What is the difference between border and outline?
Border is part of the element's box model — it takes up space and affects layout. Outline is drawn outside the element, does not take up space, and does not affect layout. Outlines are commonly used for focus indicators.
What is border-radius?
border-radius rounds the corners of an element. It is a separate property from border, not part of the border shorthand. Use values like 8px for subtle rounding or 9999px for pill-shaped buttons.
Why is my border not showing?
Borders require a style. border: 2px solid red works. border: 2px red does not. The most common mistake is setting width and color but forgetting the style value.
What are the border-style values?
The values are: none, hidden, solid, dashed, dotted, double, groove, ridge, inset, and outset. Solid is by far the most common.