Live Demo: border-width-property

Code Editor

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS border-width Property</title>
<style>
 p { 
 border-style: solid;
 padding: 20px;
 margin: 20px;
 }
 p.one {
 border-width: 5px;
 }
 p.two {
 border-width: 5px 10px;
 }
 p.three {
 border-width: 5px 10px 15px;
 }
 p.four {
 border-width: medium 10px thick 15px;
 }
</style>
</head>
<body>
 one-value syntax: the single value sets the width of all four border sides.
 two-value syntax: the first value sets the width of the top and bottom border, while the second value sets the width of the right and left sides border.
 three-value syntax: the first value sets the width of the top border, the second value sets the width of the right and left border, and the third value sets the width of the the bottom border.
 four-value syntax: each value sets the width of the border individually in the order top, right, bottom, and left.
</body>
</html>

Code Editor

Output Preview