References

Beginner-friendly references for web development, with live, editable examples.

The CSS border property

Property CSS All modern browsers Updated
Quick answer

The CSS border property draws a line around an element. It is a shorthand for three things at once — width, style and color — for example border: 1px solid #d0d7e2;. The style is required: leave it out and no border appears, because the default style is none.

Overview

The border property draws a line around an element's box, between its padding and its margin. It is a shorthand that sets three things in one go: the line's width, its style, and its color — in that order, though only the style is mandatory.

That last point trips people up. The default border style is none, so border: 2px blue shows nothing — there is no style for the browser to draw. You need border: 2px solid blue. The style can be solid, dashed, dotted, double and a few more; if you omit the color, the border quietly uses the element's text color.

You can target one side at a time with border-top, border-right and friends — a single border-bottom makes a tidy underline for a heading or a tab. And while it is technically separate, border-radius almost always comes along for the ride to round those corners.

Syntax

selector {
  border: width style color;
}

/* e.g. a 1px gray card outline */
.card {
  border: 1px solid #d0d7e2;
  border-radius: 10px;
}

Values

The border property accepts the values below. Every property also accepts the CSS-wide keywords inherit, initial, revert and unset.

Value Description
width How thick the line is: a length such as 1px, or a keyword (thin, medium, thick).
style The line style — solid, dashed, dotted, double, groove and others. Required, or no border shows.
color The line color. Falls back to the element's currentColor if you leave it out.

Example

Live example 
<style>
  .card {
    border: 1px solid #d0d7e2;
    border-radius: 10px;
    padding: 18px 20px;
    font: 15px/1.5 system-ui, sans-serif;
  }
  .tab {
    border-bottom: 3px solid #1c7ce9;
    padding: 8px 4px;
    margin-top: 14px;
    display: inline-block;
    font: 600 15px system-ui, sans-serif;
  }
</style>
<div class="card">A 1px outline with rounded corners.</div>
<span class="tab">An active tab, drawn with border-bottom</span>

Best practices

  • Always include the style — it is the one required part. border: 1px solid works, border: 1px #ccc draws nothing.
  • Reach for a single-side border like border-bottom for underlines, tabs and dividers instead of a full box.
  • Pair border with border-radius to soften corners, and keep the radius consistent across a component for a tidy look.
  • Prefer outline over border for focus rings — outline does not shift the layout, so the element does not jump when it gains focus.

Frequently asked questions

How do I add a border in CSS?
Use the shorthand border: 1px solid #d0d7e2;, which sets the width, style and color together. The style is required — without it the border will not show.
Why is my border not showing?
The most common reason is a missing style. The default border style is none, so you must include one, e.g. border: 2px solid red, not border: 2px red.
How do I add a border to only one side?
Use the side-specific property, such as border-bottom: 2px solid #1c7ce9;. There is one for each edge: border-top, border-right, border-bottom and border-left.
What is the difference between border and outline?
border takes up space and pushes the layout outward; outline is drawn on top without affecting layout. That makes outline the better choice for keyboard focus rings.
background-color border-radius