Can't get smooth egdes on a hexagon in css

Question

I've made a hexagon container for an image, but I can't figure how to add some more smooth/curved edges on it.

I was hoping that someone could help me.

.hexagon {
  position: relative;
  width: 180px; 
  height: 103.92px;
  background-color: #64C7CC;
  margin: 51.96px 0;
}

.hexagon:before,
.hexagon:after {
  content: "";
  position: absolute;
  width: 0;
  border-left: 90px solid transparent;
  border-right: 90px solid transparent;
}

.hexagon:before {
  bottom: 100%;
  border-bottom: 51.96px solid #64C7CC;
}

.hexagon:after {
  top: 100%;
  width: 0;
  border-top: 51.96px solid #64C7CC;
}

<div class="hexagon"></div>

Thanks for your help.

It is going to be tough getting curved edges on hexagon with pure CSS. You may want to have a look at the `clip-path` solution [here](http://stackoverflow.com/questions/31854185/how-to-add-border-in-my-clip-path-polygon-css-style/31854299#31854299) and possibly even use SVG for the clip-path (better browser support). — Harry, Mar 17 '16 at 08:23
as @Harry commented, curved edges will be hard to achive with CSS. I would suggest using and SVG with the path element. I describe an approach [here](http://stackoverflow.com/a/31284251/1811992) — web-tiki, Mar 17 '16 at 08:28

Matt Reynolds · Accepted Answer · 2016-03-17T09:39:10.760

You can achieve something similar using divs with z-index and radial-gradient:

<div class="hexagon"></div>
<div class="circle"></div>

and css:

body {
  background-color: #eeeeee;
}

.circle {
  width: 240px;
  position: absolute;
  top:15px;
  height: 240px;
  z-index: 2;
  background: -webkit-radial-gradient(transparent 59%, #eeeeee 41%);
  background: -o-radial-gradient(transparent 59%, #eeeeee 41%); 
  background: -moz-radial-gradient(transparent 59%, #eeeeee 41%); 
  background: radial-gradient(transparent 59%, #eeeeee 41%); 
}


.hexagon {
  position: absolute;
  top: 31px;
  left: 38px;
  width: 180px; 
  height: 103.92px;
  background-color: #64C7CC;
  margin: 51.96px 0;
  z-index: -1;
}

.hexagon:before,
.hexagon:after {
  content: "";
  position: absolute;
  width: 0;
  border-left: 90px solid transparent;
  border-right: 90px solid transparent;

}

.hexagon:before {
  bottom: 100%;
  border-bottom: 51.96px solid #64C7CC;
}

.hexagon:after {
  top: 100%;
  width: 0;
  border-top: 51.96px solid #64C7CC;
}

The body background color property is just to blend the outside gradient into the background, just remove to see the gradient on it's own. Doesn't work in IE 9 and below though....

JSFiddle

Can't get smooth egdes on a hexagon in css

1 Answers1