border-top-width Archives

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

Demo:

Syntax:

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

medium (default) – defines a medium top border.

thin – defines a thin top border.

thick – defines a thick top border.

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

Example1:

Set the width of the top border to the medium:

<!DOCTYPE html>
<html>
<head>
<style>
p {
  border-top-style: solid;
  border-top-width: medium;
}

div {
  border-style: solid;
  border-top-width: medium;
}
</style>
</head>
<body>

<p>A paragraph with a medium top border.</p>
<div>A div element with a medium top border.</div>

</body>
</html>

Output:

A paragraph with a medium top border.

A div element with a medium top border.

Example2:

Set the width of the top border to 5px:

<!DOCTYPE html>
<html>
<head>
<style>
p {
  border-top-style: solid;
  border-top-width: 5px;
}

div {
  border-style: solid;
  border-top-width: 5px;
}
</style>
</head>
<body>

<p>A paragraph with a 5px thick top border.</p>
<div>A div element with a 5px thick top border.</div>

</body>
</html>

Output:

A paragraph with a 5px thick top border.

A div element with a 5px thick top border.

Enjoy coding!