title: How to get a border-bottom line with rounded corner
body: <p>I'm trying to get rounded corner underlines as you can see on the picture under "augmenter" and "visibilité sur internet".</p>
  
  <p><a href="https://i.stack.imgur.com/txxPD.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/txxPD.jpg" alt="enter image description here"></a></p>
  
  <p>I've achieved to do half of it as you can see in the snippet. But I cannot find a way to create a radius to the upper corner of my border-bottom (border-top-right/left-radius works only for border-top).</p>
  
  <p>Do you have any solution ?
  Thx in advance</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>p{
    font-size: 30px;
    line-height: 30px;
  }
  .primary-underline{
    text-decoration: none;
    border-bottom: 10px solid #06CC6B;
    border-bottom-right-radius : 10px;
    border-bottom-left-radius : 10px;
    line-height: 10px;
    display: inline-block;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;p&gt;Nous aidons les artisans, commerçants, startups et PME à 
  &lt;span class="primary-underline"&gt;augmenter&lt;/span&gt; leur 
  &lt;span class="primary-underline"&gt;visibilité sur internet&lt;/span&gt;&lt;/p&gt;</code></pre>
  </div>
  </div>
  </p>