Categories
CSS Web development

CSS border-left-style

CSS border-left-style

The CSS border-left-style property settles the style of an element’s left border.

Demo:

Syntax:

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

none (default) – defines no border.

hidden – a border is not visible.

dotted – defines a dotted border.

dashed – defines a dashed border.

solid – defines a solid border.

double – defines a double border.

groove – defines a 3D grooved border.

ridge – defines a 3D ridged border.

inset – defines a 3D inset border.

outset – defines a 3D outset border.

Example1:

A dashed left border:

<!DOCTYPE html>
<html>
<head>
<style>
h4 {
  border-left-style: dashed;
  padding:10px;
}

p {
  border-style: solid;
  border-left-style: dashed;
  padding:10px;
}
</style>
</head>
<body>

<h4>A heading with a dashed left border.</h4>
<p>A paragraph with a dashed left border.</p>

</body>
</html>

Output:

A heading with a dashed left border.

A paragraph with a dashed left border.


Example2:

A dotted left border:

<!DOCTYPE html>
<html>
<head>
<style>
h4 {
  border-left-style: dotted;
  
}

p {
  border-style: solid;
  border-left-style: dotted;
  
}
</style>
</head>
<body>

<h4>A heading with a dotted left border.</h4>
<p>A paragraph with a dotted left border.</p>

</body>
</html>

Output:

A heading with a dotted left border.

A paragraph with a dotted left border.


Enjoy coding!

Read also:

CSS border Property

CSS border-bottom Property