[SOLVED] How to make a rounded corner hexagon by using CSS

How to make a rounded corner hexagon by using CSS

This is my CSS:

#hexagon { 
    width: 100px; 
    height: 55px; 
    background: red; 
    position: relative;
    border-radius: 10px;
    top: 30px;
} 

#hexagon:before { 
    content: "";
    position: absolute;
    top: -25px;
    left: 0;
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 29px solid red;
    border-radius: 10px;
} 

#hexagon:after { 
    content: ""; 
    position: absolute; 
    bottom: -25px; 
    left: 0; 
    width: 0; 
    height: 0; 
    border-left: 50px solid transparent; 
    border-right: 50px solid transparent; 
    border-top: 29px solid red;
    border-radius: 10px;
}

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

The output is that 4 corners of the hexagon are rounded, but the top and the bottom are not. I want to make all corners of the hexagon rounded. How can I make top and bottom corners rounded? Or how can I make the top corner of a triangle rounded?

Solution

I think you are looking for this.

.hex {
  position: relative;
  margin: 1em auto;
  width: 10em;
  height: 17.32em;
  border-radius: 1em/.5em;
  background: orange;
  transition: opacity .5s;
}

.hex:before,
.hex:after {
  position: absolute;
  width: inherit;
  height: inherit;
  border-radius: inherit;
  background: inherit;
  content: '';
}

.hex:before {
  -webkit-transform: rotate(60deg);
  transform: rotate(60deg);
}

.hex:after {
  -webkit-transform: rotate(-60deg);
  transform: rotate(-60deg);
}

<div class="hex"></div>