Segmented Rounded-Outline Pill CSS Breadcrumb

A refined outline-only pill breadcrumb: each crumb is framed in a thin rounded border with no fill, so the trail reads as a row of elegant capsule outlines. Hover fills the pill softly; the current crumb becomes a solid accent capsule. The understated, high-craft treatment for premium product UIs.

Live DemoJul 22, 2026

Plain CSSTailwind v4

Try it

Build interactive UI like this from scratch: 20 HTML, CSS & JavaScript projects

ZTM · JavaScript Web Projects · 30‑day money-back guarantee · Affiliate link

10% off at checkout with code

Check ZTM Course

The code

<nav class="bc-15" aria-label="Breadcrumb">
  <ol>
    <li><a href="#">Home</a></li>
    <li><a href="#">Workspace</a></li>
    <li><a href="#">Boards</a></li>
    <li><a href="#" aria-current="page">Roadmap</a></li>
  </ol>
</nav>

<nav class="bc-15" aria-label="Breadcrumb">
  <ol>
    <li><a href="#">Home</a></li>
    <li><a href="#">Workspace</a></li>
    <li><a href="#">Boards</a></li>
    <li><a href="#" aria-current="page">Roadmap</a></li>
  </ol>
</nav>

.bc-15 {
  display: grid;
  width: 100%;
  min-height: 100vh;
  --accent: oklch(0.55 0.15 250);
  font-family: system-ui,'Segoe UI',sans-serif;
  padding: 30px;
  background: oklch(0.99 0.003 250);
  place-items: center;
}

.bc-15 * {
  box-sizing: border-box;
}

.bc-15 ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.bc-15 li {
  display: flex;
  align-items: center;
  gap: 9px;
}

.bc-15 li:not(:last-child)::after {
  content: "›";
  color: oklch(0.75 0.02 250);
  font-size: 13px;
}

.bc-15 a {
  display: inline-block;
  padding: 7px 15px;
  border-radius: 9999px;
  font: 600 13px/1 system-ui,sans-serif;
  color: oklch(0.48 0.03 250);
  text-decoration: none;
  border: 1.5px solid oklch(0.86 0.01 250);
  background: transparent;
  transition: background-color .18s ease,border-color .18s ease,color .18s ease;
}

.bc-15 a:hover {
  color: var(--accent);
  border-color: color-mix(in oklab,var(--accent) 50%,oklch(0.86 0.01 250));
  background: color-mix(in oklab,var(--accent) 8%,transparent);
}

.bc-15 a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.bc-15 li[aria-current="page"] a {
  color: #fff;
  background: var(--accent);
  border-color: var(--accent);
}

@media (prefers-reduced-motion: reduce) {
  .bc-15 a {
    transition: none;
  }
}

.bc-15 {
  display: grid;
  width: 100%;
  min-height: 100vh;
  --accent: oklch(0.55 0.15 250);
  font-family: system-ui,'Segoe UI',sans-serif;
  padding: 30px;
  background: oklch(0.99 0.003 250);
  place-items: center;
}

.bc-15 * {
  box-sizing: border-box;
}

.bc-15 ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.bc-15 li {
  display: flex;
  align-items: center;
  gap: 9px;
}

.bc-15 li:not(:last-child)::after {
  content: "›";
  color: oklch(0.75 0.02 250);
  font-size: 13px;
}

.bc-15 a {
  display: inline-block;
  padding: 7px 15px;
  border-radius: 9999px;
  font: 600 13px/1 system-ui,sans-serif;
  color: oklch(0.48 0.03 250);
  text-decoration: none;
  border: 1.5px solid oklch(0.86 0.01 250);
  background: transparent;
  transition: background-color .18s ease,border-color .18s ease,color .18s ease;
}

.bc-15 a:hover {
  color: var(--accent);
  border-color: color-mix(in oklab,var(--accent) 50%,oklch(0.86 0.01 250));
  background: color-mix(in oklab,var(--accent) 8%,transparent);
}

.bc-15 a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.bc-15 li[aria-current="page"] a {
  color: #fff;
  background: var(--accent);
  border-color: var(--accent);
}

@media (prefers-reduced-motion: reduce) {
  .bc-15 a {
    transition: none;
  }
}

/* No JavaScript — border-only rounded pills at rest; hover washes a faint color-mix() tint and the current page becomes a solid accent capsule. */

/* No JavaScript — border-only rounded pills at rest; hover washes a faint color-mix() tint and the current page becomes a solid accent capsule. */

Here's a working CSS Breadcrumb from CodeFronts. Use it as-is or adapt to your framework. All classes are scoped under a unique prefix so the code won't collide with your existing styles. MIT licensed.
Demo: Segmented Rounded-Outline Pill CSS Breadcrumb
Source: https://codefronts.com/navigation/css-breadcrumbs/segmented-rounded-outline-pill-css-breadcrumb/

A refined outline-only pill breadcrumb: each crumb is framed in a thin rounded border with no fill, so the trail reads as a row of elegant capsule outlines. Hover fills the pill softly; the current crumb becomes a solid accent capsule. The understated, high-craft treatment for premium product UIs.
## HTML
```html
<nav class="bc-15" aria-label="Breadcrumb">
  <ol>
    <li><a href="#">Home</a></li>
    <li><a href="#">Workspace</a></li>
    <li><a href="#">Boards</a></li>
    <li><a href="#" aria-current="page">Roadmap</a></li>
  </ol>
</nav>
```
## CSS
```css
.bc-15 {
  display: grid;
  width: 100%;
  min-height: 100vh;
  --accent: oklch(0.55 0.15 250);
  font-family: system-ui,'Segoe UI',sans-serif;
  padding: 30px;
  background: oklch(0.99 0.003 250);
  place-items: center;
}

.bc-15 * {
  box-sizing: border-box;
}

.bc-15 ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.bc-15 li {
  display: flex;
  align-items: center;
  gap: 9px;
}

.bc-15 li:not(:last-child)::after {
  content: "›";
  color: oklch(0.75 0.02 250);
  font-size: 13px;
}

.bc-15 a {
  display: inline-block;
  padding: 7px 15px;
  border-radius: 9999px;
  font: 600 13px/1 system-ui,sans-serif;
  color: oklch(0.48 0.03 250);
  text-decoration: none;
  border: 1.5px solid oklch(0.86 0.01 250);
  background: transparent;
  transition: background-color .18s ease,border-color .18s ease,color .18s ease;
}

.bc-15 a:hover {
  color: var(--accent);
  border-color: color-mix(in oklab,var(--accent) 50%,oklch(0.86 0.01 250));
  background: color-mix(in oklab,var(--accent) 8%,transparent);
}

.bc-15 a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.bc-15 li[aria-current="page"] a {
  color: #fff;
  background: var(--accent);
  border-color: var(--accent);
}

@media (prefers-reduced-motion: reduce) {
  .bc-15 a {
    transition: none;
  }
}
```

## JavaScript
```js
/* No JavaScript — border-only rounded pills at rest; hover washes a faint color-mix() tint and the current page becomes a solid accent capsule. */
```

Paste this into ChatGPT, Claude, Cursor, or any coding assistant. The block below is pre-framed with everything the AI needs to integrate this demo into your project — markup, styles, scoping notes, and the source URL. Hit Copy and paste straight into your chat.

Here's a working CSS Breadcrumb from CodeFronts. Use it as-is or adapt to your framework. All classes are scoped under a unique prefix so the code won't collide with your existing styles. MIT licensed.
Demo: Segmented Rounded-Outline Pill CSS Breadcrumb
Source: https://codefronts.com/navigation/css-breadcrumbs/segmented-rounded-outline-pill-css-breadcrumb/

A refined outline-only pill breadcrumb: each crumb is framed in a thin rounded border with no fill, so the trail reads as a row of elegant capsule outlines. Hover fills the pill softly; the current crumb becomes a solid accent capsule. The understated, high-craft treatment for premium product UIs.
## HTML
```html
<nav class="bc-15" aria-label="Breadcrumb">
  <ol>
    <li><a href="#">Home</a></li>
    <li><a href="#">Workspace</a></li>
    <li><a href="#">Boards</a></li>
    <li><a href="#" aria-current="page">Roadmap</a></li>
  </ol>
</nav>
```
## CSS
```css
.bc-15 {
  display: grid;
  width: 100%;
  min-height: 100vh;
  --accent: oklch(0.55 0.15 250);
  font-family: system-ui,'Segoe UI',sans-serif;
  padding: 30px;
  background: oklch(0.99 0.003 250);
  place-items: center;
}

.bc-15 * {
  box-sizing: border-box;
}

.bc-15 ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.bc-15 li {
  display: flex;
  align-items: center;
  gap: 9px;
}

.bc-15 li:not(:last-child)::after {
  content: "›";
  color: oklch(0.75 0.02 250);
  font-size: 13px;
}

.bc-15 a {
  display: inline-block;
  padding: 7px 15px;
  border-radius: 9999px;
  font: 600 13px/1 system-ui,sans-serif;
  color: oklch(0.48 0.03 250);
  text-decoration: none;
  border: 1.5px solid oklch(0.86 0.01 250);
  background: transparent;
  transition: background-color .18s ease,border-color .18s ease,color .18s ease;
}

.bc-15 a:hover {
  color: var(--accent);
  border-color: color-mix(in oklab,var(--accent) 50%,oklch(0.86 0.01 250));
  background: color-mix(in oklab,var(--accent) 8%,transparent);
}

.bc-15 a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.bc-15 li[aria-current="page"] a {
  color: #fff;
  background: var(--accent);
  border-color: var(--accent);
}

@media (prefers-reduced-motion: reduce) {
  .bc-15 a {
    transition: none;
  }
}
```

## JavaScript
```js
/* No JavaScript — border-only rounded pills at rest; hover washes a faint color-mix() tint and the current page becomes a solid accent capsule. */
```

How this works

Each crumb is a fully-rounded (border-radius:9999px) capsule with a 1.5px border and a transparent fill, so only the outline shows — a lighter, more refined cousin of the solid pill (demo 15). The border colour is a soft neutral; the text a muted ink. Layout is flex with gap, so outlines keep even spacing and wrap cleanly. Optional tiny chevrons between pills add direction, or the gap alone can imply sequence.

State is a gentle fill progression: :hover/:focus-visible washes the pill with a faint accent tint and darkens its border and text; the current page becomes a solid accent capsule with white text and no border, the clear endpoint against the field of outlines. Because it's border-only at rest, the trail feels airy and premium — it sits well on white product surfaces and in settings panels where a heavy filled trail would feel loud. Focus rings sit cleanly outside the pill.

Make it yours

Border weight + colour set the craft level — 1px cool-grey reads premium; 2px accent reads bolder.
Fill-on-hover strength is one color-mix() percentage — keep it faint for elegance.
Current pill: solid accent (shown) or a heavier accent outline if you want an all-outline trail.
Add a subtle backdrop-filter to the pills for a frosted-outline look on busy backgrounds.

Gotchas — read before shipping

Border-only pills rely on the border for contrast — ensure the outline clears 3:1 against the page for the non-text boundary.
Text inside must still clear 4.5:1 on the PAGE colour (no fill at rest) — muted ink, not pale grey.
When the current pill goes solid, verify white text contrast on the accent (oklch lightness ≤ 0.62).
Use gap, not margins, so wrapping stays even — same rule as the filled pill demo.

Browser support

Chrome	Safari	Firefox	Edge
111+	15.4+	113+	111+

color-mix() (2023) tints the hover fill; the rest (radius, border, flex gap) is universal. Swap color-mix() for a static tint to go fully back-compatible.

Techniques used in this demo

color-mix()MDN ↗place-items / place-contentMDN ↗:focus-visibleMDN ↗