CSS Tip

The future of hexagon shapes

A new and easy way to create hexagon shapes using corner-shape. As a bonus, you can add a border to it.

It's the only method that works with borders!

CSS-only hexagon shapes using corner-shape

.hexagon {
  border-radius: 50% / 25%;
  corner-shape: bevel;
  aspect-ratio: cos(30deg);
  border: 8px solid purple; /* the border will follow the shape! */
}
/* OR  */
.hexagon {
  border-radius: 25% / 50%;
  corner-shape: bevel;
  aspect-ratio: 1/cos(30deg);
  border: 8px solid purple; /* the border will follow the shape! */
}

⚠️ Very limited support (Chrome-only with experimental flag enabled) ⚠️

See the Pen Hexagon shapes (with border!) by Temani Afif (@t_afif) on CodePen.

Until better support use this: A Modern way to create hexagon shapes

More CSS Tips