How do create a Hexagon with border and curved edge and curved sides?

Question

I want to make exact like the image above. A hexagon which has curved edge and also it has border. I have tried to give it border-radius but it's not working in some parts. What I made so far the code I'm sharing also.

.menu-container {
  text-align: center;
  margin-top: 50px;
  margin-bottom: 50px;
}
.hex-wrapper {
  display: inline-block;
}
.hexagon {
 background-color: #ccc;
 background-position: center center;
 border: 3px solid red;
 color: rgba(0, 0, 0, 0.5);
 cursor: pointer;
 float: left;
 font-family: sans-serif;
 font-size: 2em;
 font-weight: bold;
 height: 110px;
 letter-spacing: 6px;
 line-height: 110px;
 margin: 30px 3px;
 position: relative;
 text-align: center;
 transition: color 500ms ease 0s, text-shadow 500ms ease 0s, background-color 500ms ease 0s, -webkit-transform 1s ease-in-out 0s;
 width: 190px;
 z-index: 1;
 border-radius: 10px;
}

.hexagon .face1,
.hexagon .face2 {
 backface-visibility: hidden;
 background: inherit;
 border-left: 3px solid red;
 border-right: 3px solid red;
 height: 100%;
 left: 0;
 overflow: hidden;
 position: absolute;
 top: 0;
 width: 184px;
 z-index: -1;
}
.hexagon .face1:before,
.hexagon .face2:before {
  content: '';
  position: absolute;
  width: 220px;
  height: 220px;
  background: inherit;
}
.hexagon .face1 { transform: rotate(60deg); }
.hexagon .face1:before {
  left: 0;
  transform-origin: left top;
  transform: rotate(-60deg) translate(-110px, 0);
}
.hexagon .face2 { transform: rotate(-60deg); }
.hexagon .face2:before {
  right: 0;
  transform-origin: right top;
  transform: rotate(60deg) translate(110px, 0);
}

    <div class="menu-container">
     <div class="hex-wrapper">
      <div class="hexagon" id="nav-home">
       Home
       <div class="face1"></div>
       <div class="face2"></div>
      </div>
     </div>
    </div>