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 any 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