How to make a negative rounded corner to put on the tab of a button?

Question

Would be rounded corners off the button:

              |
              |
   __________ / <---- em cima (usando cláusula css :before)
  /
  |  Botão
  |
  \___________
              \ <---- em baixo (usando cláusula css :after)
              |
              |

Behold this jsfiddle example, I’d like to round up the outside.

I’m trying to follow some patterns like this example.

Answer 1

Adjust the elements :before and :after as follows, creating 2 borders on each one, applying the background of the page (in this case, green) and positioning them:

#menu ul li.active:before {
content:'';
 padding: 5px; /* um espaçamento de 5px é suficiente */
 background: green; /* mesmo fundo da página */
 width:2px;
 height: 2px;
 float:right;
 position:relative;
 top:-13px;
 border-radius: 0 0 100% 0; /* curvo a borda de baixo */
 border-right: 5px solid #000; /* borda direita em 5px na cor preta */
 border-bottom: 5px solid #000; /* borda inferior em 5px na cor preta */
 top: -13px; left: 4px; position: relative; /* posiciono o elemento para encaixar */
 }
#menu ul li.active:after {
 content:'';
 padding: 5px; /* um espaçamento de 5px é suficiente */
 background: green; /* mesmo fundo da página */
 width:2px;
 height: 2px;
 float:right;
 border-radius: 0 100% 0 0; /* curvo a borda da direita */
 border-right: 5px solid #000; /* borda direita em 5px na cor preta */
 border-top: 5px solid #000; /* borda superior em 5px na cor preta */
 top: -4px; left:4px; position: relative; /* posiciono o elemento para encaixar */
 }

#menu {
 float:left;
width: 195px; 
font-family: sans-serif

}
#conteudo {
  margin-left: 230px;
  border: 1px solid #000;
  width: 220px;
  height: 350px;
  background: #000;
}
#menu ul li {
 list-style:none; 
 border-radius: 10px 0 0 10px;  
 border-style: solid;
 boder-color: #000;
 border-width: 1px 0 1px 1px;
 margin:20px 0;
 width: 190px;
 height:80px;
 background: #8bc34a;

}
#menu ul li a:hover{
  background: #ccc;
}
#menu ul li a {
 display:block;
 padding:10px;
 width: 168px;
 height: 58px;
 border: 1px solid #000; 
 line-height: 58px;
 text-decoration:none;
 border-radius: 10px 0 0 10px; 
}
#menu ul li.active a {
 background: #000;
 color: #fff;
}

<div style="width: 100%; height: 600px; background: green">


<div id="menu">
<ul>
  <li class="active"><a href="#">exemplo 1 ativo</a></li>
  <li><a href="#">exemplo 2</a></li>
  <li><a href="#">exemplo 2</a></li>
</ul>
</div>
<div id="conteudo">
<div>
</div>

</div>

Jsfiddle