CSS BORDER SIDES


In CSS, there are properties for specifying the top, right, bottom, and left borders i.e. individual sides.


Here's the syntax:


element {
  border-top-style: value;
  border-right-style: value;
  border-bottom-style: value;
  border-left-style: value;
}


For example:


<!DOCTYPE html>
<html>
<head>
<style>
p {
  border-top-style: dotted;
  border-right-style: dashed;
  border-bottom-style: double;
  border-left-style: solid;
}
</style>
</head>
<body>

<p>individual border styles.</p>

</body>
</html>
Live Demo!


Output:

individual border styles.



If the border-style property has four values:


border-style: dotted solid double dashed;
Live Demo!

  • top border will be dotted.
  • right border will be solid.
  • bottom border will be double.
  • left border will be dashed.

If the border-style property has three values:


border-style: dotted solid double;
Live Demo!

  • top border will be dotted.
  • right and left borders will be solid.
  • bottom border will be double.

If the border-style property has two values:


border-style: dotted solid;
Live Demo!

  • top and bottom borders will be dotted.
  • right and left borders will be solid.

If the border-style property has one value:


border-style: dotted;
Live Demo!

  • All four borders will be dotted.

Let's check another example:


<!DOCTYPE html>
<html>
<head>
<style>
body {
  text-align: center;
}
p.four {
  border-style: dotted solid double dashed;
}
p.three {
  border-style: dotted solid double;
}
p.two {
  border-style: dotted solid;
}
p.one {
  border-style: dotted;
}
</style>
</head>
<body>

<h2>Individual Border Sides</h2>
<p class="four">4 different border styles.</p>
<p class="three">3 different border styles.</p>
<p class="two">2 different border styles.</p>
<p class="one">1 border style.</p>

</body>
</html>
Live Demo!


Output:

Individual Border Sides

4 different border styles.

3 different border styles.

2 different border styles.

1 border style.


In the above example, all the paragraphs have different border sides with different styles!