Runnable CSS Docs: Border

Q: How do I add a border in CSS?

Use the shorthand with a width, a style and a color: border: 2px solid #2563eb;. The style is the part that matters most: without one, the border style is none and no border is drawn.

Q: Why is my CSS border not showing?

Almost always because no border style is set. border: 2px #2563eb; or border-color: red; alone draw nothing, since the default border-style is none. Add solid, dashed or another style.

Q: How do I make rounded corners in CSS?

Use border-radius: border-radius: 8px; rounds all four corners. border-radius: 50%; on a square makes a circle, and a large value like 999px makes a pill shape. It rounds the background too, even with no border.

Q: How do I add a border to only one side?

Use a side property: border-bottom: 2px solid #e5e7eb;, or border-inline-start for the side where text starts, which also works for right-to-left languages.

The border shorthand

border draws a line around an element, between its padding and its margin. The shorthand takes three parts in any order: a width, a style and a color.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Border</title>
  <style>
    div { padding: 12px; margin-bottom: 12px; }
    .a { border: 2px solid #2563eb; }
    .b { border: 4px dashed #16a34a; }
    .c { border: 6px double #f59e0b; border-radius: 12px; }
  </style>
</head>
<body>
  <div class="a">border: 2px solid #2563eb</div>
  <div class="b">border: 4px dashed #16a34a</div>
  <div class="c">border: 6px double #f59e0b, rounded</div>
</body>
</html>

Part	Longhand	Values	Default
Width	`border-width`	`1px`, `0.2em`, `thin`, `medium`, `thick`	`medium`
Style	`border-style`	`solid`, `dashed`, `dotted`, `double`, and more	`none`
Color	`border-color`	Any color	`currentColor` (the text color)

The style is the one you cannot skip. Its default is none, so border: 2px #2563eb; draws nothing at all. If you leave out the color, the border takes the element's text color.

Border styles

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Border styles</title>
  <style>
    .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; }
    .grid div {
      border-width: 6px;
      border-color: #2563eb;
      padding: 12px 6px;
      text-align: center;
      font-family: monospace;
    }
  </style>
</head>
<body>
  <div class="grid">
    <div style="border-style: solid">solid</div>
    <div style="border-style: dashed">dashed</div>
    <div style="border-style: dotted">dotted</div>
    <div style="border-style: double">double</div>
    <div style="border-style: groove">groove</div>
    <div style="border-style: ridge">ridge</div>
    <div style="border-style: inset">inset</div>
    <div style="border-style: outset">outset</div>
    <div style="border-style: none">none</div>
  </div>
</body>
</html>

double needs at least 3px to show two lines. groove, ridge, inset and outset shade the color to look 3D and differ slightly between browsers. hidden looks like none; the two only differ inside tables with collapsed borders, which the HTML table border page covers.

One side at a time

Every side has its own shorthand (border-top, border-right, border-bottom, border-left), and every part has per-side longhands such as border-top-color. The logical versions, border-inline-start and border-block-end, follow the text direction:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Sides</title>
  <style>
    .heading { border-bottom: 3px solid #2563eb; padding-bottom: 6px; }
    .callout {
      border-inline-start: 6px solid #f59e0b;
      background: #fffbeb;
      padding: 10px 14px;
    }
    .four {
      border-width: 6px;
      border-style: solid;
      border-color: #2563eb #16a34a #f59e0b #111827; /* top right bottom left */
      padding: 12px;
      margin-top: 12px;
    }
    .no-top { border: 2px solid #111827; border-top: none; padding: 8px; margin-top: 12px; }
  </style>
</head>
<body>
  <h2 class="heading">A heading with a bottom border</h2>
  <p class="callout">A callout with a border on the start side.</p>
  <div class="four">Four sides, four colors</div>
  <div class="no-top">All sides, then the top removed</div>
</body>
</html>

border-color, border-width and border-style accept one to four values in the same clockwise order as padding: top, right, bottom, left.

Rounded corners with border-radius

border-radius rounds the corners of the border and the background, so it works on elements with no border at all.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>border-radius</title>
  <style>
    .row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
    .row div {
      width: 90px;
      height: 90px;
      background: #2563eb;
      color: white;
      display: grid;
      place-items: center;
      font: 13px monospace;
    }
    .r8 { border-radius: 8px; }
    .circle { border-radius: 50%; }
    .row .pill { border-radius: 999px; width: 150px; height: 44px; }
    .one { border-radius: 0 24px 0 24px; }
    .ellipse { border-radius: 50% / 25%; }
  </style>
</head>
<body>
  <div class="row">
    <div class="r8">8px</div>
    <div class="circle">50%</div>
    <div class="pill">999px</div>
    <div class="one">0 24px</div>
    <div class="ellipse">50% / 25%</div>
  </div>
</body>
</html>

Value	Result
`border-radius: 8px`	All corners rounded by 8px
`border-radius: 50%`	A circle on a square element, an ellipse on a rectangle
`border-radius: 999px`	A pill: the short sides become full semicircles
`border-radius: 8px 0`	Top-left and bottom-right 8px, the other two square
`border-top-left-radius: 12px`	One corner only
`border-radius: 50% / 25%`	Elliptical corners: horizontal radius / vertical radius

A child with a background can poke out past a rounded parent's corners. overflow: hidden on the parent clips it to the curve.

Border vs outline

An outline looks like a border but is drawn outside it and takes no space, so adding one never moves anything. That is why browsers use outlines for focus rings.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Border vs outline</title>
  <style>
    .item { padding: 10px; background: #e5e7eb; margin-bottom: 10px; width: 220px; }
    .jump:hover { border: 4px solid #2563eb; }          /* grows the box: content jumps */
    .steady { border: 4px solid transparent; }
    .steady:hover { border-color: #2563eb; }            /* same size: no jump */
    .ring:hover { outline: 4px solid #2563eb; }         /* takes no space */
  </style>
</head>
<body>
  <div class="item jump">Hover: border added, box grows</div>
  <div class="item steady">Hover: transparent border colored</div>
  <div class="item ring">Hover: outline, no size change</div>
</body>
</html>

	Border	Outline
Takes up space	Yes, part of the box size	No
Per side	Yes (`border-top`, ...)	No, all around
Follows `border-radius`	Yes	Yes, in current browsers
Offset from the box	No	Yes, `outline-offset`
Typical use	Design	Focus indicators, debugging

Common mistakes

No border style. border: 1px #111827; and border-color: red; draw nothing. Include solid (or another style).
A border that makes the layout jump on hover. Reserve the space with a transparent border, or use an outline or box-shadow.
Forgetting the border in the width. A width: 100% element with a border overflows its container under content-box. Use box-sizing: border-box.
border-radius with a child poking out of the corners. Add overflow: hidden to the rounded parent.
Removing focus outlines with outline: none. Keyboard users need them; restyle the outline instead of deleting it.

Frequently Asked Questions

How do I add a border in CSS?

Use the shorthand with a width, a style and a color: border: 2px solid #2563eb;. The style is the part that matters most: without one, the border style is none and no border is drawn.

Why is my CSS border not showing?

Almost always because no border style is set. border: 2px #2563eb; or border-color: red; alone draw nothing, since the default border-style is none. Add solid, dashed or another style.

How do I make rounded corners in CSS?

Use border-radius: border-radius: 8px; rounds all four corners. border-radius: 50%; on a square makes a circle, and a large value like 999px makes a pill shape. It rounds the background too, even with no border.

How do I add a border to only one side?

Use a side property: border-bottom: 2px solid #e5e7eb;, or border-inline-start for the side where text starts, which also works for right-to-left languages.

What is the difference between border and outline?

A border is part of the box: it takes up space and changes the element's size. An outline is drawn outside the border without taking space, cannot be set per side, and is what browsers use for focus rings. Both follow border-radius in current browsers.

Related concepts