CSS - border-left-style Property

Quiz

CSS border-left-style property sets the style of an element's left border only.

Syntax

border-left-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit;

Property Values

Value	Description
none	It specifies no border. Default value.
hidden	It is similar to none, except in border conflict resolution for table elements.
dotted	It specifies a dotted border.
dashed	It specifies a dashed border.
solid	It specifies a solid border.
double	It specifies a double border.
groove	It specifies a 3D grooved border. Effect depends on the border-color value.
ridge	It specifies a 3D ridged border. Effect depends on the border-color value.
inset	It specifies a 3D inset border. Effect depends on the border-color value.
outset	It specifies a 3D outset border. Effect depends on the border-color value.
initial	This sets the property to the default value.
inherit	This inherits the property from the parent element.

Examples of CSS Border left Style Property

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

None Border left Style

To not have any left border, we use the none value. In the following example, none value has been used.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .border-none {
         border-left-style: none;
         text-align: center;
         padding: 15px;
         margin: 8px;
      }

      h1 {
         background-color: lightgreen;
      }

      p {
         border: 6px solid silver;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-left-style property
   </h2>
   <div>
      <h1 class="border-none">
         This heading has 'none' left border style
      </h1>
      <p class="border-none">
         This border has 'none' left border style
      </p>
   </div>
</body>

</html>

Transparent Border left Style

To have a border that exists but is not visible, we can use the transparent value. The transparent value creates invisible border as compared to none, which creates no border. This difference is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .borders {
         padding: 15px;
         margin: 8px;
         text-align: center;
      }

      .border1 {
         border: 8px solid silver;
         border-left-style: none;
      }

      .border2 {
         border: 8px solid silver;
         border-left-color: gold;
         border-left-style: transparent;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-left-style property
   </h2>
   <div>
      <p class="borders border1">
         This border is using none value, 
         so it does not have left border
         indicated by the gap.
      </p>
      <p class="borders border2">
         This border is using transparent value,
         so it has an invisible border. Since the border
         exist, the border color is applied to it 
         indicated by the gold color.
      </p>
   </div>
</body>

</html>

Dotted Border left Style

To have dotted left border, we use the dotted value. In the following example, dotted value has been used with the border-left-style property.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .border-none {
         border-left-style: dotted;
         border-left-color:black;
         border-left-width:6px;
         text-align: center;
         padding: 15px;
         margin: 8px;
      }

      h1 {
         background-color: lightgreen;
      }

      p {
         border: 6px solid silver;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-left-style property
   </h2>
   <div>
      <h1 class="border-none">
         This heading has 'dotted' left border style
      </h1>
      <p class="border-none">
         This border has 'dotted' left border style
      </p>
   </div>
</body>

</html>

Dashed Border left Style

To have dashed left border, we use the dashed value. In the following example, dashed value has been used with the border-left-style property.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .border-none {
         border-left-style: dashed;
         border-left-color:black;
         border-left-width:6px;
         text-align: center;
         padding: 15px;
         margin: 8px;
      }

      h1 {
         background-color: lightgreen;
      }

      p {
         border: 6px solid silver;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-left-style property
   </h2>
   <div>
      <h1 class="border-none">
         This heading has 'dashed' left border style
      </h1>
      <p class="border-none">
         This border has 'dashed' left border style
      </p>
   </div>
</body>

</html>

Solid Border left Style

To have solid left border, we use the solid value. In the following example, solid value has been used with the border-left-style property.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .border-none {
         border-left-style: solid;
         border-left-color:black;
         border-left-width:6px;
         text-align: center;
         padding: 15px;
         margin: 8px;
      }

      h1 {
         background-color: lightgreen;
      }

      p {
         border: 6px solid silver;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-left-style property
   </h2>
   <div>
      <h1 class="border-none">
         This heading has 'solid' left border style
      </h1>
      <p class="border-none">
         This border has 'solid' left border style
      </p>
   </div>
</body>

</html>

Double Border left Style

To have double left border, we use the double value. In the following example, double value has been used with the border-left-style property.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .border-none {
         border-left-style: double;
         border-left-color:black;
         border-left-width:6px;
         text-align: center;
         padding: 15px;
         margin: 8px;
      }

      h1 {
         background-color: lightgreen;
      }

      p {
         border: 6px solid silver;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-left-style property
   </h2>
   <div>
      <h1 class="border-none">
         This heading has 'double' left border style
      </h1>
      <p class="border-none">
         This border has 'double' left border style
      </p>
   </div>
</body>

</html>

Groove Border left Style

To have groove left border, we use the groove value. In the following example, groove value has been used with the border-left-style property.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .border-none {
         border-left-style: groove;
         border-left-color:black;
         border-left-width:6px;
         text-align: center;
         padding: 15px;
         margin: 8px;
      }

      h1 {
         background-color: lightgreen;
      }

      p {
         border: 6px solid silver;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-left-style property
   </h2>
   <div>
      <h1 class="border-none">
         This heading has 'groove' left border style
      </h1>
      <p class="border-none">
         This border has 'groove' left border style
      </p>
   </div>
</body>

</html>

Ridge Border left Style

To have ridge left border, we use the ridge value. In the following example, ridge value has been used with the border-left-style property.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .border-none {
         border-left-style: ridge;
         border-left-color:black;
         border-left-width:6px;
         text-align: center;
         padding: 15px;
         margin: 8px;
      }

      h1 {
         background-color: lightgreen;
      }

      p {
         border: 6px solid silver;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-left-style property
   </h2>
   <div>
      <h1 class="border-none">
         This heading has 'ridge' left border style
      </h1>
      <p class="border-none">
         This border has 'ridge' left border style
      </p>
   </div>
</body>

</html>

Inset Border left Style

To have an inset left border, we use the inset value. In the following example, inset value has been used with the border-left-style property.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .border-none {
         border-left-style: inset;
         border-left-color:black;
         border-left-width:6px;
         text-align: center;
         padding: 15px;
         margin: 8px;
      }

      h1 {
         background-color: lightgreen;
      }

      p {
         border: 6px solid silver;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-left-style property
   </h2>
   <div>
      <h1 class="border-none">
         This heading has 'inset' left border style
      </h1>
      <p class="border-none">
         This border has 'inset' left border style 
      </p>
   </div>
</body>

</html>

Outset Border left Style

To have an outset left border, we use the outset value. In the following example, outset value has been used with the border-left-style property.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .border-none {
         border-left-style: outset;
         border-left-color:black;
         border-left-width:6px;
         text-align: center;
         padding: 15px;
         margin: 8px;
      }

      h1 {
         background-color: lightgreen;
      }

      p {
         border: 6px solid silver;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-left-style property
   </h2>
   <div>
      <h1 class="border-none">
         This heading has 'outset' left border style
      </h1>
      <p class="border-none">
         This border has 'outset' left border style
      </p>
   </div>
</body>

</html>

Supported Browsers

Property
border-left-style	1.0	5.5	1.0	1.0	9.2

css_reference.htm

Print Page