Test

HTML

<script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">
<div class="container">
    <div class="module1">
      <div class="row">
        <div class="col-sm-4">
          <div class="cellHolder">
            <a href="#" class="btn btn-aura">Se e-développer</a>
            <h3>Pourquoi se lancer dans le e-commerce ?</h3>
            <div class="description">
              Pour communiquer en temps réel auprès de vos clients et prospects, les réseaux sociaux sont idéaux du
              fait
              de leur instantanéité.
            </div>
            <a href="#" class="read-more" aria-label="Lire la suite">Lire la suite</a>
          </div>
        </div>
        <div class="col-sm-4">
          <div class="cellHolder convex">
            <a href="#" class="btn btn-aura">Se e-développer</a>
            <h3>Comment se lancer dans le e-commerce ?</h3>
            <div class="description">
              Se lancer dans le e-commerce OUI, mais par où commencer : design, paiement, livraison, produits, stock ?
            </div>
            <a href="#" class="read-more" aria-label="Lire la suite">Lire la suite</a>
          </div>
        </div>
        <div class="col-sm-4">
          <div class="cellHolder concav">
            <h3>Innovation, ressources humaines, développement éco responsable...</h3>
            <div class="description">
              Il y a ceux qui s’informent frénétiquement, et ceux qui ne savent jamais à quel saint se vouer.
            </div>
            <a href="#" class="read-more" aria-label="Voir tous les conseils">Voir tous les...

SCSS

body {
  padding:10px;
}


/* pour aliger les blocks entre eux */
.row {
  align-items: stretch;
}
.row > * {
  flex-grow: 1;
  display: flex;
  flex-grow: 1;
}




:root {
  --orange: #fd7e14;
  --border: 2px solid var(--orange);
  --padding: 25px;
  --convex-width: 200px; /* la largeur de l'objet qui fait la courbe, en px, car sinon si on dépend de la largeur du parent, ça passera pas */
  --convex-height: 120%; /* la hauteur du convex, ta courbe dépendra de cette hauteur, en % de préférénce */ 
  --decalage: -44px; /* le décalage nécessaire pour replacer les éléments afin de pas avoir un truc dégueux 
    Le décalage dépend de --convex-width et --conver-height. Je n'ai pas pu faire de relation mathématique entre les 3. */
 --padding-convex: calc((var(--decalage) * -1) + var(--padding));
}

.cellHolder {
  border: 2px solid var(--orange);
  padding: var(--padding);
  position: relative;
  z-index: 1;

}

/* on ne garde que la bordure gauche */

.cellHolder.convex {
  border:none;
  overflow: hidden;
  margin-right: var(--decalage);
  z-index: 2;
}

/* la partie bordure droite arrondie */
.cellHolder.convex::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: var(--convex-width);
  height: var(--convex-height);
  margin-right:2px;
  background:#fff;//var(--border);
  z-index: -1;
  border-radius: 100%;
  transform: translate(0, -50%);
  filter: drop-shadow(2px 0px 0px var(--orange));
  
}

/* cette partie contient les fake bordure top et bottom */
.cellHolder.convex::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  border: var(--border);
  border-right:none;
  border-top-left-radius:8px;
  border-bottom-left-radius:8px;
  right:calc(var(--decalage) * -1 + 1px);
  height: 100%;
}

.cellHolder.concav {
  border: none;
  background: var(--orange);
  color: #fff;
  overflow: hidden;
  padding-left: var(--padding-convex);
}

/* pour le concav un simple cercle de 100%  et yolo */
.cellHolder.concav::before {
  content:...