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>

Elizebethelizondo

Have you Googled make hexagon shape with border and rounded corners in css? – Overpass

Tnx for attention...I try that but it isn't helpful..how can i set border for this : jsfiddle.net/yR7zt/4 ...... my major problem is set border for this....solid border set is not good idea,,! – Elizebethelizondo

I found a sample of that thing i want --- I want thing same this : respooonsive.com/dash/demo/index-image.html – Elizebethelizondo

@miladhp: Is the inner part of your shape transparent (or) will it have a colored/image as fill? – Otocyst

@web-tiki --- It isn't my target--- now , how can I add border for this hexagonal ?? it is my problem. – Elizebethelizondo

@Otocyst it is transparent.. I want to add a text in it.. – Elizebethelizondo

Looks like you can make it with rounded corners – Larisalarissa

Answer 1

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>

Otocyst

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

Answer 2

I made a codepen where you can customise side length and border radius: https://codepen.io/shreyansqt/pen/qBjprWE

HTML:

<svg width="500" height="500">
  <path id="hexagon" fill="red" />
</svg>

JS:

const getHexagonPathData = () => {
  // #################### x1,y0 ####################
  // ############## xc1,yc0 # xc2,yc0 ##############
  // ###############################################
  // ###############################################
  // #### xc0,yc1 ##################### xc3,yc1 ####
  // ## x0,y1 ############################# x2,y1 ##
  // ## x0,yc2 ########################### x2,yc2 ##
  // ###############################################
  // ###############################################
  // ## x0,yc3 ########################### x2,yc3 ##
  // ## x0,y2 ############################# x2,y2 ##
  // #### xc0,yc4 ##################### xc3,yc4 ####
  // ###############################################
  // ###############################################
  // ############## xc1,yc5 # xc2,yc5 ##############
  // #################### x1,y3 ####################

  const sin = (deg) => Math.sin((deg * Math.PI) / 180);
  const cos = (deg) => Math.cos((deg * Math.PI) / 180);

  const borderRadius = 6;
  const sideLength = 80;
  const x0 = 0;
  const y0 = 0;

  const x1 = sideLength * cos(30);
  const y1 = sideLength * sin(30);

  const xc1 = x1 - borderRadius * cos(30);
  const yc0 = borderRadius * sin(30);
  const xc2 = x1 + borderRadius * cos(30);

  const x2 = 2 * x1;
  const y2 = y1 + sideLength;

  const xc3 = x2 - borderRadius * cos(30);
  const yc1 = y1 - borderRadius * sin(30);
  const yc2 = y1 + borderRadius;

  const y3 = y2 + y1;

  const yc3 = y2 - borderRadius;
  const yc4 = y2 + borderRadius * sin(30);

  const yc5 = y3 - borderRadius * sin(30);
  const xc0 = borderRadius * cos(30);

  return `
        M ${xc1},${yc0}
        Q ${x1},${y0} ${xc2},${yc0}

        L ${xc3},${yc1}
        Q ${x2},${y1} ${x2},${yc2}

        L ${x2},${yc3}
        Q ${x2},${y2} ${xc3},${yc4}

        L ${xc2},${yc5}
        Q ${x1},${y3} ${xc1},${yc5}
        
        L ${xc0},${yc4}
        Q ${x0},${y2} ${x0},${yc3}
        
        L ${x0},${yc2}
        Q ${x0},${y1} ${xc0},${yc1}
        Z
      `;
};

const hexagon = document.getElementById("hexagon");

hexagon.setAttribute("d", getHexagonPathData());

Labellum

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

@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". – Tamayo

Incredible @Labellum – Metaphase