La propriété "border-radius” vous aidera à arrondir les angles, au sens propre.

Par défaut, tout élément est angulaire. Chaque élément du DOM est un carré, ou rectangle. Mais il est possible d’arrondir chaque angle de n’importe quel élément

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Border-Radius</title>
    <style>
      .shape {
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        width: 100px;
        height: 100px;
        background-color: #4caf50;
        color: white;
        font-weight: bold;
      }

      /* Carré (aucune modification) */
      .square {
        border-radius: 0;
      }

      /* Coins arrondis */
      .rounded {
        border-radius: 15px;
      }

      /* Cercle complet */
      .circle {
        border-radius: 50%;
      }

      /* Cercle avec une image */
      .circle-image {
        overflow: hidden;
        border-radius: 50%;
      }

      .circle-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .nail {
        border-radius: 0 0 50px 50px; /* Deux coins arrondis (en bas) */
      }
      .portal {
        border-radius: 50px 50px 0 0; /* Deux coins arrondis (en haut) */
      }

      /*  
        Détails de mise en page

        */
      body {
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
        margin: 0;
        background-color: #f4f4f9;
      }

      .container {
        display: flex;
        gap: 20px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="shape square">Carré</div>
      <div class="shape rounded">Coins arrondis</div>
      <div class="shape circle">Cercle</div>
      <div class="shape nail">Ongle</div>
      <div class="shape portal">Portail</div>
      <div class="shape circle-image">
        <img src="<https://picsum.photos/200/300>" alt="Image ronde" />
      </div>
    </div>
  </body>
</html>

<!-- 

-->

Outils pour générer des border-radius :