CSS - border-left Property

CSS border-left property is a shorthand for defining the values of the properties border-left-width, border-left-style and border-left-color in one single declaration. The border-left-style is required. Default values of color and width will be used if not specified.

Syntax

border-left: border-width border-style border-color | initial | inherit;

Property Values

Value	Description
border-left-width	It specifies the width of element's left border. Optional. Default value is medium.
border-left-style	It specifies the style of element's left border. Required. Default value is none.
border-left-color	It specifies the color of element's left border. Optional. Default value is the color of the text.
initial	It sets the property to its default value.
inherit	It inherits the property from the parent element.

Examples of CSS Border Left Property

The following examples explain the border-left property with different values.

Defining All Values of Border Left Property

To define the values of border-left-width, border-left-style and border-left-color in one single declaration, we use the border-left property. Three values are to be given to the property, first value for width, second for style and third for color. The following example shows how this is done.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .properties {
         text-align: center;
         padding: 20px;
      }

      .example1 {
         background-color: lightgreen;
         border-left: blue 15px solid;
      }

      .example2 {
         border: 2px solid black;
         border-left: 5px dashed red;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-left property
   </h2>
   <h4 class="properties example1">
      This shows a blue left border 
      for a 'h4' tag
   </h4>
   <p class=" properties example2">
      This shows a 'red' left border 
   </p>
</body>

</html>

Constituent Properties of Border Left Property

The border-left property is a combination of border-left-width, border-left-style and border-left-color properties. The following example shows how these properties can be used in combination to show the border-left property effect.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .properties {
         text-align: center;
         padding: 20px;
      }

      .example1 {
         background-color: lightgray;
         border-left-width: 15px;
         border-left-style: solid;
         border-left-color: green;
      }

      .example2 {
         border: 2px solid black;
         border-left-width: 25px;
         border-left-style: solid;
         border-left-color: brown;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-left property
   </h2>
   <h4 class="properties example1">
      This shows a green left border for a 'h4' tag
   </h4>
   <p class="properties example2">
      This shows a 'brown' left border 
   </p>
</body>

</html>

Supported Browsers

Property
border-left	1.0	4.0	1.0	3.5	1.0

css_reference.htm

Print Page