Exemple plein de boîtes variées avec des différentes valeurs de la propriétés CSS border-radius qui créent la forme des boîtes

Source Code: (back to article)

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      div {
      width: 250px;
      height: 150px;
      border: solid 3px #1c87c9;
      background: #1c87c9;
      }
      .radius_1 {
      border-radius: 25px;
      -moz-border-radius: 25px;
      -webkit-border-radius: 25px;
      }
      .radius_2 {
      border-radius: 25% 10%;
      -moz-border-radius:  25% 10%;
      -webkit-border-radius:  25% 10%;
      }
      .radius_3 {
      border-radius: 10% 30% 50% 70%;
      -moz-border-radius: 10% 30% 50% 70%;
      -webkit-border-radius:  10% 30% 50% 70%;
      }
      .radius_4 {
      border-radius: 10% / 50%;
      -moz-border-radius:  10% / 50%;
      -webkit-border-radius: 10% / 50%;
      }
      .radius_5 {
      border-radius: 10px 100px / 120px;
      -moz-border-radius:  10px 100px / 120px;
      -webkit-border-radius:  10px 100px / 120px;
      }
      .radius_6 {
      border-radius: 25% 10%;
      -moz-border-radius:  25% 10%;
      -webkit-border-radius:  25% 10%;
      }
      .radius_7 {
      border-radius: 50% 20% / 10% 40%;
      -moz-border-radius:  50% 20% / 10% 40%;
      -webkit-border-radius:  50% 20% / 10% 40%;
      }
      .radius_8 {
      border-radius: 50%;
      -moz-border-radius:  50%;
      -webkit-border-radius: 50%;
      }
    </style>
  </head>
  <body>
    <h2> Border-radius examples</h2>
    <div class="radius_1"></div>
    <br />
    <div class="radius_2"></div>
    <br />
    <div class="radius_3"></div>
    <br />
    <div class="radius_4"></div>
    <br />
    <div class="radius_5"></div>
    <br />
    <div class="radius_6"></div>
    <br />
    <div class="radius_7"></div>
    <br />
    <div class="radius_8"></div>
  </body>
</html>