CSS3 Rounded Corners

With CSS3, you can give any element “rounded corners” 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 –

border-radius: Use this element for setting four boarder radius property.

border-top-left-radius: Use this element for setting the boarder of top left corner.

border-top-right-radius: Use this element for setting the boarder of top right corner.

border-bottom-right-radius: Use this element for setting the boarder of bottom right corner.

border-bottom-left-radius: Use this element for setting the boarder of bottom left corner.

Example:

          This property can have three values. The following example uses both the values :

<html>

   <head>

      <style>

         #rcorners1 {

            border-radius: 25px;

            background: #8AC007;

            padding: 20px;

            width: 200px;

            height: 150px;

         }

         #rcorners2 {

            border-radius: 25px;

            border: 2px solid #8AC007;

            padding: 20px;

            width: 200px;

            height: 150px;

         }

         #rcorners3 {

            border-radius: 25px;

            background: url(/css/images/logo.png);

            background-position: left top;

            background-repeat: repeat;

            padding: 20px;

            width: 200px;

            height: 150px;

         }

      </style>

   </head>

   <body>

      <p id = “rcorners1”>Rounded corners!</p>

      <p id = “rcorners2”>Rounded corners!</p>

      <p id = “rcorners3”>Rounded corners!</p>

   </body>

</html>

Each Corner property:

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

<html>

   <head>

      <style>

         #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;

         }

      </style>

   </head>

   <body>

      <p id = “rcorners1”></p>

      <p id = “rcorners2”></p>

      <p id = “rcorners3”></p>

   </body>

</html>

Spread the love

Leave a Comment

Your email address will not be published. Required fields are marked *