Как получить границу нижней линии с закругленным углом

Question

Я пытаюсь получить подчеркивание закругленных углов, как вы можете видеть на картинках под заголовком «augmenter» и «visibilité sur internet».

Мне удалось сделать половину этого, как вы можете видеть в фрагментеНо я не могу найти способ создания радиуса в верхнем углу моего border-bottom (border-top-right / left-radius работает только для border-top).

У вас есть какое-нибудь решение?Спасибо заранее

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;
}

<p>Nous aidons les artisans, commerçants, startups et PME à 
<span class="primary-underline">augmenter</span> leur 
<span class="primary-underline">visibilité sur internet</span></p>

Answer 1

Используйте псевдоэлемент:

p{
  font-size: 30px;
  line-height: 30px;
}
.primary-underline{
  text-decoration: none;
  display: inline-block;
  position:relative;
  z-index:0;
}
.primary-underline:before {
  content:"";
  position:absolute;
  z-index:-1;
  bottom:0;
  left:0;
  height:10px;
  width:100%;
  border-radius:10px;
  background:#06CC6B;
}

<p>Nous aidons les artisans, commerçants, startups et PME à 
<span class="primary-underline">augmenter</span> leur 
<span class="primary-underline">visibilité sur internet</span></p>

Или вы можете рассмотреть несколько фонов:

p{
  font-size: 30px;
  line-height: 30px;
}
.primary-underline{
  text-decoration: none;
  display: inline-block;
  background:
    radial-gradient(farthest-side, #06CC6B 98%,transparent 100%) bottom right/10px 10px,
    radial-gradient(farthest-side, #06CC6B 98%,transparent 100%) bottom left /10px 10px,
    linear-gradient(#06CC6B,#06CC6B) bottom/calc(100% - 10px) 10px;
  background-repeat:no-repeat;
  
}

<p>Nous aidons les artisans, commerçants, startups et PME à 
<span class="primary-underline">augmenter</span> leur 
<span class="primary-underline">visibilité sur internet</span></p>

И с некоторыми переменными CSS для лучшего контроля:

p{
  font-size: 30px;
  line-height: 30px;
}
.primary-underline{
  --s:10px;    /* height of the line */
  --c:#06CC6B; /* color*/

  text-decoration: none;
  display: inline-block;
  background:
    radial-gradient(farthest-side, var(--c) 98%,transparent 100%) bottom right/var(--s) var(--s),
    radial-gradient(farthest-side, var(--c) 98%,transparent 100%) bottom left /var(--s) var(--s),
    linear-gradient(var(--c),var(--c)) bottom/calc(100% - var(--s)) var(--s);
  background-repeat:no-repeat;
  
}

<p>Nous aidons les artisans, commerçants, startups et PME à 
<span class="primary-underline">augmenter</span> leur 
<span class="primary-underline" style="--s:15px;--c:pink">visibilité sur internet</span> et aussi à <span class="primary-underline" style="--s:5px;--c:orange;">faire autre chose</span></p>

Answer 2

Используйте псевдоэлемент, расположенный за содержимым, для создания эффекта подчеркивания.

Демонстрация: (при необходимости измените значения)

p{
  font-size: 30px;
  line-height: 30px;
}
.primary-underline{
  position: relative;
  display: inline-block;
  z-index:0;
}
.primary-underline:before {
  content: '';
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  bottom: -5px;
  height: 0;
  border: 10px solid #06CC6B;
  border-radius : 10px;
}

<p>Nous aidons les artisans, commerçants, startups et PME à 
<span class="primary-underline">augmenter</span> leur 
<span class="primary-underline">visibilité sur internet</span></p>