A form field, a card, a secondary button: most interfaces lean on border to give their elements a crisp outline. It looks like a simple property, but hides a classic trap that catches almost everyone early on: an invisible border despite a width that is clearly set.
border works closely with the Box model, since it takes up real space inside the box, and with border-radius whenever its corners need rounding.
Definition
border is the shorthand that bundles three properties into a single declaration: line thickness, style, and colour. All three need to be present for a border to actually show up.
.card {
border: 1px solid #d1d5db;
}This line draws a solid, light grey, one-pixel line on all four sides of the element. Removing solid leaves nothing on screen, even while keeping 1px: with no line style set, border-style defaults to none, and no width alone makes a border visible.
The three parts of the shorthand
| Property | Role | Default value |
|---|---|---|
border-width | The thickness of the line | medium, roughly 3px |
border-style | The shape of the line: solid, dashed... | none |
border-color | The colour of the line | The element's text colour |
It is that default value of border-style, none, that explains the most common trap: until a style is specified, the border stays fully invisible, no matter what width or colour is declared.
Colour holds a surprise of its own: with no border-color declared, the border inherits currentColor, the element's text colour. Changing color on a button therefore also changes the colour of its border, without a single border-color rule ever being written.
The values of border-style
Beyond solid, several line styles exist, each suited to a specific use in an interface.
| Value | Rendering | Typical use |
|---|---|---|
solid | Continuous solid line | The vast majority of cases |
dashed | Regular dashes | File drop zone, subtle separator |
dotted | Regular dots | Decorative underline |
double | Two parallel lines | Decorative borders, rare in interfaces |
none | No border shown | Removing an inherited border |
Setting a border on one side
Each side accepts its own full shorthand: border-top, border-right, border-bottom and border-left, each with an independent width, style and colour. That is what makes a very common interface pattern possible, the card flagged by a single coloured border.
.alert {
border-left: 4px solid #f59e0b;
padding: 12px 16px;
background-color: #fffbeb;
}The other three sides stay without a border, only the left one carries a thick, coloured line: an instant visual signal, with no extra graphic to load.
border and the size of the box
Like padding, border takes up real space: by default, it adds to the width and height set by width and height, never replacing them.
Adding a border on hover to a button that had none makes the box grow by twice the border's width, nudging neighbouring elements slightly out of place. Always reserve the space upfront with a transparent border at rest, border: 1px solid transparent, or switch the element to box-sizing: border-box so the addition no longer changes its final size.
Switching an entire project to box-sizing: border-box settles this problem once and for all, including for borders added dynamically on hover, on a field's selection, or when an error message appears.
Frequently asked questions
Why doesn't my border show up even though I set border-width?
Because border-style defaults to none: a width on its own is never enough to display a border. A style always needs to be set, solid in the vast majority of cases, before the line becomes visible.
What is the real difference between border and outline?
border takes up real space in the box and adds to its size by default, while outline is drawn on top without ever shifting neighbouring elements. That is why the keyboard focus ring almost always uses outline rather than border.
How do you round the corners of a border?
With the border-radius property, independent from border but applied automatically to the line it draws, as well as to the element's background and any drop shadow.