CSS Borders

A border is a line drawn around an element, between its padding and its margin. Borders make cards, buttons, and boxes visible — without a border, a white card on a white page is invisible. CSS gives you full control: the style of the line, its thickness, its colour, and each side separately.

Diagram — see how it fits together

Syntax — the three parts of a border

A border needs three things: a style (what kind of line), a width (how thick), and a colour. You can write them as three properties, or all at once in the shorthand.

.card {
  border-style: solid;
  border-width: 2px;
  border-color: #f59e0b;
}
/* The same border, in one line: */
.card {
  border: 2px solid #f59e0b;
}

Border styles

Each side separately

You can style one side at a time — useful for an underline effect or a coloured left edge on a notice box.

.notice {
  border-left: 5px solid green;
  border-top: 1px solid #ccc;
}
.box {
  border-radius: 12px;
}

border-left, border-right, border-top, and border-bottom each take the same three values as the shorthand. And border-radius rounds the corners: a small value like 12px gives soft corners, and 50% turns a square into a perfect circle — the trick behind round profile photos.

Outline — the border's cousin

An outline looks like a border, but it is drawn outside the border, and it does not take up any space — it never pushes other elements away. That makes it perfect for focus rings: the coloured ring you see around a button or a form field when you press Tab.

button:focus {
  outline: 3px solid blue;
}

Box shadow — depth without a border

box-shadow adds a soft shadow behind an element, which makes it look raised off the page — the classic card look. The values are: horizontal offset, vertical offset, blur, and colour.

.card {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

Read it as: no sideways shift, 4 pixels down, 12 pixels of blur, in a soft black that is 20% opaque. Shadows cost nothing in layout — like outlines, they do not push anything around.

Common mistakes

• Setting width and colour but no style — the border stays invisible, because the default style is none.
• Writing border: solid; and expecting a colour — without a colour, the border uses the text colour, which is often not what you wanted.
• Using border-radius: 50% on a rectangle — you get an oval, not a circle. A circle needs a square element first.
• Removing outlines with outline: none; and giving keyboard users nothing in return.
• Forgetting that a border adds to the element's size — a 300px box with a 2px border is 304px wide, unless box-sizing: border-box is set.

Remember

• A border is style + width + colour — and style is the one you must never forget.
• Shorthand: border: 2px solid red; sets all three at once.
• border-left / right / top / bottom style one side only.
• border-radius rounds corners; 50% on a square makes a circle.
• Outline sits outside the border and takes no space; box-shadow adds depth without affecting layout.

Example explained

• .profile { border: 3px solid #2563eb; border-radius: 12px; } — the profile card gets a solid blue border and softly rounded corners.
• .avatar { border-radius: 50%; } — the photo is a square, so a 50% radius turns it into a perfect circle.
• .coupon { border: 2px dashed #dc2626; } — a dashed red border, like the torn edge of a paper coupon.
• .card { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); } — a soft shadow under the card, so it looks raised off the page.
• button:focus { outline: 3px solid #2563eb; } — when the button is focused with the keyboard, a blue ring appears around it.