How to Make an Octagon with CSS

Learn two easy, production-ready ways to draw a clean, regular octagon with pure CSS. This guide includes a live preview, copy‑paste snippets, centering techniques, and quick customization tips.

Live Preview: Octagon

Method 1: Using CSS clip-path

.octagon {
  width: 140px;
  aspect-ratio: 1 / 1;     /* keep it square so it stays regular at any size */
  background: #cd5454;

  /* Regular octagon: t = 1 - 1/√2 ≈ 29.289% */
  clip-path: polygon(
    29.289% 0%, 70.711% 0%,
    100% 29.289%, 100% 70.711%,
    70.711% 100%, 29.289% 100%,
    0% 70.711%, 0% 29.289%
  );
}
/* Optional centering for the element itself */
.octagon {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.octagon {
  width: 140px;
  aspect-ratio: 1 / 1;     /* keep it square so it stays regular at any size */
  background: #cd5454;

  /* Regular octagon: t = 1 - 1/√2 ≈ 29.289% */
  clip-path: polygon(
    29.289% 0%, 70.711% 0%,
    100% 29.289%, 100% 70.711%,
    70.711% 100%, 29.289% 100%,
    0% 70.711%, 0% 29.289%
  );
}
/* Optional centering for the element itself */
.octagon {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

Method 2: Using Borders (Top/Bottom Trapezoids)

/* For a 140px square: c = 140 * (1 − 1/√2) ≈ 41px, middle band = 58px */
.octagon-border {
  position: relative;
  width: 140px;
  height: 58px;            /* middle band height ≈ 140 − 2*41 */
  background: #cd5454;     /* main fill */
  display: block;
  margin-left: auto;       /* center the block */
  margin-right: auto;
}

/* Top and bottom trapezoids built from border triangles */
.octagon-border::before,
.octagon-border::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);

  width: 58px;             /* inner width ≈ 140 − 2*41 */
  height: 0;
  border-left: 41px solid transparent;
  border-right: 41px solid transparent;
}

/* Heights of ~41px create 45° slants with equal side cuts */
.octagon-border::before {
  top: -41px;
  border-bottom: 41px solid #cd5454;
}

.octagon-border::after {
  bottom: -41px;
  border-top: 41px solid #cd5454;
}

/* For a 140px square: c = 140 * (1 − 1/√2) ≈ 41px, middle band = 58px */
.octagon-border {
  position: relative;
  width: 140px;
  height: 58px;            /* middle band height ≈ 140 − 2*41 */
  background: #cd5454;     /* main fill */
  display: block;
  margin-left: auto;       /* center the block */
  margin-right: auto;
}

/* Top and bottom trapezoids built from border triangles */
.octagon-border::before,
.octagon-border::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);

  width: 58px;             /* inner width ≈ 140 − 2*41 */
  height: 0;
  border-left: 41px solid transparent;
  border-right: 41px solid transparent;
}

/* Heights of ~41px create 45° slants with equal side cuts */
.octagon-border::before {
  top: -41px;
  border-bottom: 41px solid #cd5454;
}

.octagon-border::after {
  bottom: -41px;
  border-top: 41px solid #cd5454;
}

How This Works

clip-path draws an eight-point polygon that trims the element to a regular octagon. Using percentages keeps the shape proportional, but it remains mathematically regular only if the box is square, set aspect-ratio: 1 / 1 or keep equal width/height.

The border-based method builds an octagon from three pieces: a central rectangle plus top and bottom trapezoids made with border triangles. For a 140px square, using ~41px side cuts and a ~58px middle band reproduces a regular octagon with 45° corners.

How to Center Content Inside an Octagon

The easiest way is to turn the shape into a flex or grid container and center children with one or two properties.

Method 1: Use CSS Flexbox

.octagon, .octagon-border {
  display: flex;
  justify-content: center; /* horizontal */
  align-items: center;      /* vertical */
}

.octagon, .octagon-border {
  display: flex;
  justify-content: center; /* horizontal */
  align-items: center;      /* vertical */
}

Method 2: Use CSS Grid

.octagon, .octagon-border {
  display: grid;
  place-items: center; /* centers both axes */
}

.octagon, .octagon-border {
  display: grid;
  place-items: center; /* centers both axes */
}

When to Use Each Shape Method

Use clip-path for the simplest, most robust octagon with accurate hit-testing and easy animation of points. Use the border-based method if you need a no-clip-path fallback; it’s widely compatible but uses pseudo-elements.

Quick Customizations

Change the color by updating background: #cd5454; or swap in a gradient. Adjust the corner prominence by changing the offset t in clip-path (29.289% here) or the side cut c in the border method (≈ 41px here); larger values create shorter flat edges and more pronounced corners. If you change dimensions, recompute t as 1 − 1/√2 (still ~29.289%) and set c = size × t.

Accessibility & SEO

If the octagon is decorative, mark it as such or hide it from assistive tech; if it conveys meaning, add a clear aria-label (e.g., role=”img” with an informative label) and ensure sufficient color contrast for any centered text.