CSS3 - ROUNDED CORNERS

• CSS3 Rounded corners are used to add special colored corner to body or text by using the border-radius property.A simple syntax of rounded corners is as follows

#rcorners7 {
   border-radius: 60px/15px;
   background: #FF0000;
   padding: 20px;
   width: 200px;
   height: 150px;
}

• The following table shows the possible values for Rounded corners as follows

 

• Example 

    #rcorners1 {
            border-radius: 25px;
            background: #76a441;
            padding: 20px;
            width: 200px;
            height: 150px;
         }
         #rcorners2 {
            border-radius: 25px;
            border: 2px solid #76a441;
            padding: 20px;
            width: 200px;
            height: 150px;
         }
         #rcorners3 {
            border-radius: 25px;
            background: url(paper.png);
            background-position: left top;
            background-repeat: repeat;
            padding: 20px;
            width: 200px;
            height: 150px;
         }

Output :

• Each Corner property

• We can specify the each corner property as shown below example

• Example 

    #rcorners1 {
            border-radius: 15px 50px 30px 5px;
            background: #a44170;
            padding: 20px;
            width: 100px;
            height: 100px;
         }
         #rcorners2 {
            border-radius: 15px 50px 30px;
            background: #a44170;
            padding: 20px;
            width: 100px;
            height: 100px;
         }
         #rcorners3 {
            border-radius: 15px 50px;
            background: #a44170;
            padding: 20px;
            width: 100px;
            height: 100px;
         }

Output :