CSS Borders: How to Style Element Borders

Use the CSS border shorthand to set an element’s width, line style, and color on all four sides:

.card {
  border: 1px solid #333;
}

A border usually fails to appear because its style is missing: border-style defaults to none. Set a style such as solid, even when you already specified a width and color. The border sits between padding and margin, so it can change an element’s outer dimensions depending on box-sizing. For keyboard focus, an outline is often useful because it does not take layout space.

1. Set a border with the shorthand

The border shorthand applies width, style, and color to all four sides. These values can appear in any order:

.card {
  border: 1px solid #333;
}

.notice {
  border: dashed 2px tomato;
}

/* A style alone still produces a border. Width and color get defaults. */
.panel {
  border: solid;
}

When width or color is omitted, the browser uses the initial width (medium) or currentColor. When style is omitted, it defaults to none, so a declaration such as border: 2px red; does not draw the expected visible line. See the [MDN border reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/border).

2. Choose the line style

Common border-style values are none, hidden, solid, dotted, dashed, double, groove, ridge, inset, and outset. For most interface components, solid is the predictable choice; use decorative styles sparingly.

.solid { border: 1px solid #444; }
.dashed { border: 1px dashed #777; }
.dotted { border: 2px dotted #777; }
.double { border: 3px double #333; }

The browser controls the precise dash lengths and dot spacing, so their appearance can vary between implementations. The border-style property is widely available across browsers. Details are in [MDN’s border-style reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/border-style).

3. Style individual sides

Use a side shorthand when a side needs a different treatment. The physical side properties are border-top, border-right, border-bottom, and border-left.

.callout {
  border-top: 3px solid #1769aa;
  border-right: 0;
  border-bottom: 1px solid #c9d4df;
  border-left: 0;
}

You can also set a component for all sides with properties such as border-width, border-style, and border-color, or use logical properties such as border-inline-start when the intended side should follow the writing direction.

.callout {
  border-inline-start: 4px solid #1769aa;
}

For each of border-width, border-style, and border-color, one to four values map to sides in this order:

• One value: all sides.
• Two values: top and bottom; left and right.
• Three values: top; left and right; bottom.
• Four values: top; right; bottom; left.

.card {
  border-style: solid dashed dotted double;
  /* top solid, right dashed, bottom dotted, left double */
}

4. Set rounded corners

Use border-radius to round a box’s corners. One value applies to every corner; multiple values can control corners individually.

.card {
  border: 1px solid #ccc;
  border-radius: 8px;
}

.pill {
  border: 1px solid #bbb;
  border-radius: 999px;
}

.custom-corners {
  border: 1px solid #ccc;
  border-radius: 12px 12px 0 0;
}

Percentages are relative to the box dimensions: horizontal radii use the box width and vertical radii use its height. A slash separates horizontal and vertical radii to create elliptical corners. See [MDN’s border-radius reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/border-radius).

.ellipse-corners {
  border: 1px solid #ccc;
  border-radius: 50% / 20%;
}

5. Understand border sizing

A border is drawn outside the content and padding, before the margin. Its effect on dimensions depends on the box model:

• With box-sizing: content-box (the default), declared width and height describe the content box. Border and padding add to the outer size.
• With box-sizing: border-box, declared width and height include content, padding, and border. A thicker border leaves less room for the content.

.content-box {
  box-sizing: content-box;
  width: 200px;
  border: 4px solid #333;
  /* Outer width is 208px, excluding padding and margin. */
}

.border-box {
  box-sizing: border-box;
  width: 200px;
  border: 4px solid #333;
  /* Outer width stays 200px, excluding margin. */
}

If a border makes a layout wider than expected, check both box-sizing and padding. The [MDN CSS box model guide](https://github.com/mdn/content/blob/main/files/en-us/learn_web_development/core/styling_basics/box_model/index.md?plain=1) explains how these layers determine box dimensions.

6. Border or outline?

A border is part of the box and occupies space. An outline is drawn outside the border and does not affect layout, which makes it useful for focus indicators that should not move nearby content. An outline may not follow a rectangular shape in every case.

a:focus-visible {
  outline: 3px solid #1769aa;
  outline-offset: 3px;
}

Do not remove an interactive element’s focus outline unless you replace it with an equally visible focus style. See [MDN’s outline reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/outline).

7. Runnable example

Save this as borders.html and open it in a browser to see the basic patterns together:

<!doctype html>
<html lang="en">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS border examples</title>
<style>
  * { box-sizing: border-box; }
  body { font: 16px/1.5 system-ui, sans-serif; padding: 2rem; }
  .card { max-width: 32rem; padding: 1rem; border: 1px solid #888; border-radius: 8px; }
  .callout { margin-top: 1rem; padding: 1rem; border-inline-start: 4px solid #1769aa; background: #f3f8fc; }
  a:focus-visible { outline: 3px solid #1769aa; outline-offset: 3px; }
</style>
<main>
  <section class="card">
    <h1>A bordered card</h1>
    <p>The border is visible, rounded, and included in the declared width.</p>
    <a href="#details">Focus this link with the keyboard</a>
  </section>
  <aside class="callout" id="details">A logical start-side border marks this note.</aside>
</main>
</html>

8. Troubleshoot borders that do not look right

Symptom	Likely cause	Fix
No visible line	border-style is missing or set to none.	Add a style, for example border: 1px solid #333.
Line blends into the page	The color matches the background or inherits an unexpected currentColor.	Set an explicit contrasting color such as border-color: #777.
Border is on the wrong edge	A physical side was chosen when the design follows text direction, or vice versa.	Use the correct side shorthand or a logical property such as border-inline-start.
Element is wider or taller than expected	The default content-box sizing adds border thickness outside declared dimensions.	Apply box-sizing: border-box if dimensions should include the border; account for padding too.
Focus ring disappears	A reset or component rule removed the outline.	Restore a visible :focus-visible outline with sufficient contrast and an offset.
Dashes or dots differ across browsers	The exact segment length and spacing are implementation-defined.	Use solid where consistent appearance matters, or accept small rendering differences.
One shorthand unexpectedly replaces other sides	The border shorthand resets all four sides’ width, style, and color.	Declare the all-side shorthand first, then override specific sides, or use side-specific declarations.

9. Or skip the browser setup

If you need a screenshot of a page to review a border in context, ScreenshotNeo can capture it with one API request. It accepts a URL and returns a PNG, JPEG, WebP, or PDF. See the ScreenshotNeo API documentation.

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webp

import requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"}, timeout=90)
open("shot.webp", "wb").write(r.content)

const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);

ScreenshotNeo removes cookie banners, newsletter popups, and chat widgets before the shot. Bot checks, blank pages, and failed loads are never billed, and response headers tell you the page verdict and billing status. Its MCP server lets AI agents use screenshot tools. The free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000 shots. ScreenshotNeo is a website screenshot API and MCP server by Yorker Media. Sign up for 1,000 free screenshots a month, with no card.

10. FAQ

Can I make only one border side visible?

Yes. Set the side you want, such as border-bottom: 1px solid #ddd, and leave other sides unset or explicitly set them to 0.

Does a border inherit its color?

If no color is specified in the shorthand, the border color defaults to currentColor, which follows the element’s text color.

When should I use a border instead of a box shadow?

Use a border when the edge should be part of the box’s dimensions and remain a clear line. A shadow is a visual effect outside the box and does not reserve layout space.

Can border widths be fractional pixels?

CSS accepts fractional lengths, but the final rasterized edge can land between device pixels and appear softer depending on zoom and display scale.