border-radius - HTML CSS CSS Property

HTML CSS examples for CSS Property:border-radius

  1. HOME
  2. HTML CSS
  3. CSS Property
  4. border-radius

Description

The border-radius CSS property sets the rounded shape for the element border corners.

It is a shorthand property for border-top-left-radius, border-top-right-radius, border-bottom-right-radius, and border-bottom-left-radius property.

The following table summarizes the border-radius property.

Item Value
Default value: 0
Applies to:All elements
Inherited: No
Animatable: Yes.

Syntax

The syntax of the property is as follows: 


border-radius:     [ length | percentage ] 1 to 4 values

This shorthand notation can take one, two, three, or four whitespace separated values.

  • If one value is specified, it sets the radius of all corners.
  • If two values are specified, the first value sets for the top-left and bottom-right corner, while the second value sets the top-right and bottom-left sides corner.
  • If three values are specified, the first value sets the top-left corner, the second value sets the top-right and bottom-left corner, and the third value sets the bottom-right corner.
  • If four values are specified, value are for top-left, top-right, bottom-right, and bottom-left corner, respectively.

Property Values

The following table describes the values of this property.

Value Description
length A length value in px, pt, cm, em, etc.
percentage The size of the radius in percentage.
initialSets this property to its default value.
inherittakes the value of its parent element border-radius property.

The example below shows the border-radius property.

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html lang="en">
 <head>
  <title>Example of CSS3 border-radius property</title>
  <style type="text/css">
    div {<!--from  w w  w . jav  a2 s  .c o  m-->
      padding: 15px;
      margin-bottom: 20px;
      background: #ffb6c1;
      border: 2px solid #f08080;
    }
    div.one {
      border-radius: 20px;
    }
    div.two {
      border-radius: 10px 30px;
    }
    div.three {
      border-radius: 10px 30px 20px;
    }
    div.four {
      border-radius: 10px 20px 30px 40px;
    }
    </style>
 </head>
 <body>
  <div class="one">
   <strong>one-value syntax:</strong>
  </div>
  <div class="two">
   <strong>two-value syntax:</strong>
  </div>
  <div class="three">
   <strong>three-value syntax:</strong>
  </div>
  <div class="four">
   <strong>four-value syntax:</strong>
  </div>
 </body>
</html>

Related Tutorials