Example of CSS border-radius Property with different values(%,px)

Source Code: (back to article)

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the 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>
    <h1> Border-radius examples</h1>
    <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>