border-left - HTML CSS CSS Property

HTML CSS examples for CSS Property:border-left

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

Description

The border-left property sets the width, style, and color of the left border of an element.

It is a shorthand property for setting the individual left border properties.

The following table summarizes the border-left property.

Item Value
Default value: See individual properties
Applies to:All elements
Inherited: No
Animatable:Yes, See individual properties.

Syntax

The syntax of the property is as follows: 

border-left:     [ border-left-width border-left-style border-left-color ] | initial | inherit

Property Values

The following table describes the values of this property.

Value Description
border-left-width Sets the width of the element left border.
border-left-style Sets the line style of the element left border.
border-left-color Sets the color of the element left border.
initial Sets this property to its default value.
inherit takes the value of its parent element border-left property.

The example below shows the border-left property.

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html lang="en">
 <head>
  <title>Example of CSS border-left property</title>
  <style type="text/css">
        h1 {<!--   w  w  w  . j  a  v  a  2s.co m-->
            border-left: 5px solid #ff0000;
        }
        p {
            border-left: 3px dotted #00ff00;
        }
    </style>
 </head>
 <body>
  <h1>This is a heading</h1>
  <p>This is a paragraph.</p>
 </body>
</html>

Related Tutorials