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 −

Values

Description

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(paper.gif);

            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>

<body>