border-top-left-radius - HTML CSS CSS Property

HTML CSS examples for CSS Property:border-top-left-radius

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

Description

The border-top-left-radius CSS property sets the rounded shape for the "top-left" corner.

The following table summarizes the border-top-left-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-top-left-radius:     [ length | percentage ]1 or 2 values | initial | inherit

Property Values

The following table describes the values of this property.

Value Description
length A length value in px, pt, cm, em, etc. Negative values are not allowed.
percentage The size of the radius in percentage.
initialSets this property to its default value.
inherittake the value of its parent element border-top-left-radius property.

The example below shows the border-top-left-radius property.

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html lang="en">
 <head>
  <title>Example of CSS3 border-top-left-radius property</title>
  <style type="text/css">
    div {<!--from   w  w  w. ja v  a  2s .co m-->
      padding: 15px;
      background: #ffb6c1;
            border: 2px solid #f08080;
      border-top-left-radius: 20px;
    }
    </style>
 </head>
 <body>
  <div>
   The
   <code>border-top-left-radius</code> property defines the shape of the bottom-left border corner of an element.
  </div>
 </body>
</html>

Related Tutorials