A border in CSS is a line that delimits the outline of an HTML box and allows us to visually separate it from other elements.
Now that we know how to apply colors and backgrounds, it’s time to give structure and visual hierarchy to our pages. Borders help us mark boundaries, group related information, and create visual rhythm.
Think, for example, of a product card. If they have no outline separating them from their container, the interface looks flat and disorganized. By applying a subtle border, the user instantly understands that it is an independent block.
How to define a border
Every HTML element is a box. That box has a border, although by default it’s usually invisible. To see it, we need to define three things: width, style, and color.
.bordered-box {
border-width: 2px;
border-style: solid;
border-color: #333333;
}
Since writing three lines for something so common is a bit tedious (and well-channeled laziness has given us half of modern computing), CSS allows using the shorthand property border.
.quick-box {
/* width | style | color */
border: 2px solid #333333;
}
The usual order is that one, although CSS is usually quite tolerant. Still, it’s better to always write it the same way so the code can be read quickly.
Border styles
The solid style is the one you’ll use the most because it creates a clean, continuous line. But CSS includes more options.
solid: Continuous line.dashed: Dashed line.dotted: Dotted line.double: Two parallel lines.none: No border.
.warning {
border: 2px dashed #f59e0b;
}
.note {
border: 1px solid #dddddd;
}
Borders are also a very handy tool for debugging layouts. Temporarily putting border: 1px solid red; on a container helps to see how far the box actually extends (a very old trick that we all do during development 🤭).
Borders per side
We are not forced to put the same border on all four sides. We can act on a specific side using border-top, border-right, border-bottom, and border-left.
.highlighted {
border-left: 4px solid #2563eb;
padding-left: 1rem;
}
.row {
border-bottom: 1px solid #eeeeee;
}
This is very common in quotes, warnings, lists, or tables. Often, a full border enclosing everything looks too harsh, whereas a single side border communicates separation without making noise (personally, I don’t like it, but to each their own…).
Rounding corners with border-radius
The border-radius property allows you to round the corners of a box. It’s one of those details that seem small but greatly change the feel of an interface.
.button {
border-radius: 8px;
}
.card {
border: 1px solid #dddddd;
border-radius: 12px;
}
If the value is small, we get slightly softened corners. If it’s large, the element becomes much more rounded. If the box is square and we use 50%, we get a circle.
.avatar {
width: 100px;
height: 100px;
border-radius: 50%;
}
border-radius does not turn anything into a perfect circle. If the element does not have the same width and height, 50% will create an ellipse.
We can also control each corner individually.
.message {
border-radius: 12px 12px 12px 0;
}
This pattern is widely used in chat bubbles, where one corner is straighter to indicate where the message “comes from”.
outline is not the same as border
There is a similar property called outline. It is drawn around the element, but it does not take up space within the box model.
.field:focus-visible {
outline: 3px solid #facc15;
outline-offset: 3px;
}
This makes it ideal for accessible focus states. The border can change the visual size of an element and move things around. The outline, on the other hand, is drawn outside without altering the layout.
Do not remove the visible focus from interactive elements. If you change the style, that’s fine. If you remove it without an alternative, you are leaving keyboard users without a compass.
