border-right-width Archives

The CSS border-right-width property settles the width of an element’s right border.

Demo:

Syntax:

border-right-width: medium|thin|thick|length;

medium (default) – defines a medium right border.

thin – defines a thin right border.

thick – defines a thick right border.

length – allows you to specify the thickness of the right border (CSS Units).

Example1:

Set the width of the right border to thin:

<!DOCTYPE html>
<html>
<head>
<style>
h4 {
  border-right-style: solid;
  border-right-width: thin;
}

p {
  border-style: solid;
  border-right-width: thin;
}
</style>
</head>
<body>

<h4>A heading with a thin right border.</h4>
<p>A paragraph with a thin right border.</p>

</body>
</html>

Output:

A heading with a thin right border.

A paragraph with a thin right border.

Example2:

Set the width of the left border to 10px:

<!DOCTYPE html>
<html>
<head>
<style>
h4 {
  border-right-style: solid;
  border-right-width: 10px;
}

p {
  border-style: solid;
  border-right-width: 10px;
}
</style>
</head>
<body>

<h4>A heading with a 10px thick right border.</h4>
<p>A paragraph with a 10px thick right border.</p>

</body>
</html>

Output:

A heading with a 10px thick right border.

A paragraph with a 10px thick right border.

Enjoy coding!