Make hexagon shape with border, rounded corners and transparent background

Question

I want to make a hexagonal shape with border, rounded corners and transparent background in CSS3 like in this image:

I can't make this with rounded corners and border.

My code is here:

#hexagon-circle {
  position: relative;
  margin: 1em auto;
  width: 10em;
  height: 17.32em;
  border-radius: 1em/.5em;
  background: red;
  transition: opacity .5s;
  cursor: pointer;
}
#hexagon-circle:before {
  position: absolute;
  width: inherit;
  height: inherit;
  border-radius: inherit;
  background: inherit;
  content: '';
  -webkit-transform: rotate(60deg);  /* Chrome, Opera 15+, Safari 3.1+ */
  -ms-transform: rotate(60deg);  /* IE 9 */
  transform: rotate(60deg); /* Firefox 16+, IE 10+, Opera */
}

#hexagon-circle:after {
  position: absolute;
  width: inherit;
  height: inherit;
  border-radius: inherit;
  background: inherit;
  content: '';
  -webkit-transform: rotate(-60deg);  /* Chrome, Opera 15+, Safari 3.1+ */
  -ms-transform: rotate(-60deg);  /* IE 9 */
  transform: rotate(-60deg); /* Firefox 16+, IE 10+, Opera */
}

<div id="hexagon-circle"></div>

Solution

Hexagon with rounded corners are complex shapes to create and I usually recommend using SVG for creating them. The need for a transparent background makes it even more better suited for SVG. With SVG you can get better control over the shape, its curves etc and you don't have to add a lot of extra (unnecessary) elements to your markup also.

All that is needed for creating this shape with SVG is to use a single path element along with a few L (line) and A (arc) commands. The L (line) command basically draws a line from point 1 to point 2 whereas the A (arc) command draws an arc of the specified radius (the first two values immediately following the A command).

You can read more about the SVG path element and its commands in this MDN tutorial.

svg {
  height: 200px;
  width: 240px;
}
path {
  stroke: #777;
  fill: none;
}

body {
  background: black;
}

<svg viewBox='0 0 120 100'>
  <path d='M38,2 
           L82,2 
           A12,12 0 0,1 94,10 
           L112,44 
           A12,12 0 0,1 112,56
           L94,90       
           A12,12 0 0,1 82,98
           L38,98
           A12,12 0 0,1 26,90
           L8,56
           A12,12 0 0,1 8,44
           L26,10
           A12,12 0 0,1 38,2' />
</svg>

If you still want to use CSS, you could follow the approach used by jbutler483 in this fiddle of his. (I have appended the code from that fiddle also into this answer to avoid link rot problems)

.roundHex {
  position: relative;
  margin: 0 auto;
  background: transparent;
  border-radius: 10px;
  height: 300px;
  width: 180px;
  box-sizing: border-box;
  transition: all 1s;
  border: 10px solid transparent;
  border-top-color: black;
  border-bottom-color: black;
}
.roundHex:before,
.roundHex:after {
  content: "";
  border: inherit;
  position: absolute;
  top: -10px;
  left: -10px;
  background: inherit;
  border-radius: inherit;
  height: 100%;
  width: 100%;
}
.roundHex:before {
  transform: rotate(60deg);
}
.roundHex:after {
  transform: rotate(-60deg);
}

<div class="roundHex"></div>

Comments

[miladhp]

thanks a lot Harry...svg is best idea for do this...it is easy and best way for do it..

[P. Moloney]

This is a cool piece of code, though the question was asking how to do this (maybe without the mouse interactions) in CSS specifically.

[skomisa]

@P.Moloney Your point is valid and you are technically correct, but it's also worth noting that the OP added a comment to the accepted answer stating that the non-CSS solution provided (i.e. using <svg>) was the "easy and best way".

[Ben Racicot]

Incredible @shreyansqt