CSS Rounded Corners Properties Tutorial

Netbax Online Editor Try it Yourself

#corners2 {
  border-radius: 25px;
  border: 2px solid #73AD21;
  padding: 20px;
  width: 200px;
  height: 150px;
}

#corners3 {
  border-radius: 25px;
  background: url(../../../images/test4.jpeg);
  background-position: left top;
  background-repeat: repeat;
  padding: 20px;
  width: 200px;
  height: 137px;
color:#fff;
}

#corners4 {
  border-radius: 15px 50px 30px 5px;
  background: red;
  padding: 20px;
  width: 200px;
  height: 150px;

}

#corners5 {
  border-radius: 15px 50px 30px;
  background: orange;
  padding: 20px;
  width: 200px;
  height: 150px;
}

#corners6 {
  border-radius: 15px 50px;
  background: yellow;
  padding: 20px;
  width: 200px;
  height: 150px;
}

#corners7 {
  border-radius: 15px;
  background: cyan;
  padding: 20px;
  width: 200px;
  height: 150px;
}
</style>
<ol>
<li>Rounded corners for an element with a specified background color:</li>
<p id="corners1">Rounded corners!</p>
<li>Rounded corners for an element with a border:</li>
<p id="corners2" class="x-theme-border">Rounded corners!</p>
<li>Rounded corners for an element with a background image:</li>
<p id="corners3">Rounded corners!</p>
<li id="corners4">Rounded corners!</li><p>

<li id="corners5">Rounded corners!</li><p>

<li id="corners6">Rounded corners!</li><p>

<li id="corners7">Rounded corners!</li>
</ol>