Learn two reliable ways to draw a clean, regular nonagon (9-sided polygon) with pure CSS, plus quick tips to center content inside and customize the result.
Live Preview: Nonagon
Method 1: Using CSS clip-path
/* Regular nonagon using clip-path */
.nonagon {
--size: 150px;
width: var(--size);
height: var(--size);
background: #cd5454;
/* 9 points around a circle, starting at top (-90deg) and moving clockwise */
clip-path: polygon(
50% 0%,
82.14% 11.7%,
99.24% 41.32%,
93.3% 75%,
67.1% 96.99%,
32.9% 96.99%,
6.7% 75%,
0.76% 41.32%,
17.86% 11.7%
);
}
Method 2: Using an SVG Mask
/* Nonagon via SVG polygon as a mask (great for crisp edges) */
.nonagon-mask {
--size: 150px;
width: var(--size);
height: var(--size);
background: #cd5454;
/* WebKit mask + standard mask for broad support */
-webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><polygon points="50,0 82.14,11.7 99.24,41.32 93.3,75 67.1,96.99 32.9,96.99 6.7,75 0.76,41.32 17.86,11.7"/></svg>') no-repeat center / contain;
mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><polygon points="50,0 82.14,11.7 99.24,41.32 93.3,75 67.1,96.99 32.9,96.99 6.7,75 0.76,41.32 17.86,11.7"/></svg>') no-repeat center / contain;
}
How This Works
clip-path: polygon(…) clips the element to the nine coordinates provided, effectively drawing a regular nonagon by tracing points equally spaced on a circle. The element’s background (or background image) shows only inside that polygon.
The SVG mask method uses a polygon in an inline SVG as a mask, letting the element’s background appear only where the mask is opaque. It’s also crisp at any size and works well when you want the same nonagon mask applied to images or gradients.
How to Center Content Inside a Nonagon
The easiest way is to turn the nonagon container into a Flexbox or Grid wrapper and center its children.
Method 1: Use CSS Flexbox
.nonagon {
display: flex;
justify-content: center;
align-items: center;
text-align: center; /* helpful for multiline text */
}Method 2: Use CSS Grid
.nonagon {
display: grid;
place-items: center;
text-align: center;
}When to Use Each Shape Method
Use clip-path for the simplest, most direct CSS-only approach that’s easy to animate and edit in code. Use the SVG mask method when you want ultra-crisp edges at any scale, reuse the same mask across elements (including images/gradients), or need consistent rendering across complex backgrounds.
Quick Customizations
Change the color by updating background: #cd5454 to any hex, HSL, or gradient. To simulate a border, wrap the shape in a slightly larger container with a contrasting background, or layer a second masked element behind it to create a stroke-like rim.
Accessibility & SEO
If the nonagon conveys meaning, add an aria-label or visible text alternative, and ensure sufficient color contrast for any text placed inside the shape.