Borders and rounded corners

A line around the box

The border sits between a box's padding and its margin. A border has three parts, and all three matter:

• border-width: how thick (1px, 3px, thin).
• border-style: solid, dashed, dotted, double, none and more.
• border-color: any colour.

The shorthand border sets all three in one line, in any order:

<style>
  .a { border: 2px solid #7c3aed; padding: 8px; margin: 8px 0; }
  .b { border: 3px dashed #059669; padding: 8px; margin: 8px 0; }
  .c { border: 4px double #dc2626; padding: 8px; margin: 8px 0; }
</style>
<div class="a">Solid</div>
<div class="b">Dashed</div>
<div class="c">Double</div>

The most common beginner trap: border-style defaults to none. If you write border-width: 3px; border-color: red; alone, nothing appears. Always include a style.

One side at a time

.title { border-bottom: 3px solid #f59e0b; }   /* underline-style accent */
.quote { border-left: 4px solid #7c3aed; padding-left: 12px; }

You can also set each part for each side: border-top-width, border-right-color and so on. Using only the sides you need is a clean way to make dividers and accents without extra elements.

Two or four values work in shorthand like padding does: border-width: 1px 0; means 1px top and bottom, none left and right.

Rounded corners with border-radius

<style>
  .box { background: #fde68a; padding: 12px; margin: 8px 0; }
  .soft  { border-radius: 8px; }
  .pill  { border-radius: 999px; display: inline-block; padding: 8px 20px; }
  .circle{ border-radius: 50%; width: 80px; height: 80px; display: grid; place-items: center; }
</style>
<div class="box soft">Soft corners (8px)</div>
<span class="box pill">A pill</span>
<div class="box circle">Round</div>

• A small radius (4–12px) softens cards and inputs.
• 50% on a square gives a circle, and on a rectangle an ellipse.
• A very large value such as 999px (or 9999px) gives a pill shape on buttons and tags. The browser simply caps it at the maximum that fits.
• Four values round each corner separately, clockwise from top-left: border-radius: 12px 12px 0 0; rounds only the top, a common choice for cards with an image above.

Rounded corners also clip nothing by default: an image inside a rounded box still pokes its square corners out. Add overflow: hidden to the box, or give the image its own radius.

Border versus outline

An outline looks like a border but is drawn outside the border edge and takes up no layout space. Adding or changing it never moves other elements.

button:focus-visible {
  outline: 3px solid #2563eb;
  outline-offset: 2px;     /* a gap between the box and the outline */
}

Browsers use outlines for the focus ring that shows keyboard users where they are. Removing it (outline: none) leaves keyboard users lost. If you restyle it, make sure the new indicator is clearly visible and has good contrast.

Borders and the total size

Remember the box model: under the default sizing, a 2px border on each side adds 4px to the width. The box-sizing lesson shows how to include border and padding in the width you set, which makes layouts much easier to reason about.

Tables and collapsing borders

Table cells have their own borders, and by default a gap between them. border-collapse: collapse on the table merges them into single lines, which is what you want most of the time.

Common mistakes

• Forgetting the border style, then seeing nothing.
• Putting a border on every element for debugging and leaving it. Use outline for temporary debug lines, since it does not shift the layout.
• Removing focus outlines without a replacement.
• Using an image for rounded corners. border-radius does it with no extra file.
• Rounded images that still show corners because the container lacks overflow: hidden.

Exercise

Style a button as a pill with a 2px solid blue border, 10px/24px padding, and a visible focus ring offset by 3px.

<style>
  .btn {
    border: 2px solid #2563eb;
    border-radius: 999px;
    padding: 10px 24px;
    background: white;
    color: #2563eb;
    font: inherit;
    cursor: pointer;
  }
  .btn:focus-visible { outline: 3px solid #93c5fd; outline-offset: 3px; }
</style>
<button class="btn">Get started</button>