CSS’s border property is probably most often written out in the border shorthand, meaning that the one “border” property covers values for the border-width, border-color, and border-style properties. Because of this, many beginner developers might not know everything that the border-width property is capable of.
The border-width property can be used to determine the width of any CSS border. You can define the width using fixed values, like px or em, or you can use pre-determined values, like thick, thin, and medium. Thin is equal to about 2px, medium is equal to about 4px, and thick is equal to about 6px in width.
To define a border-width value of a div as medium, for example, your CSS would look something like this:
div{
width: 400px;
height: 250px;
border-width: medium;
border-color: #4d6cea;
border-style: solid;
}
And your finished product would look like this:
Don’t forget to also define the border-style (in this case we defined that as “solid”) or else the border won’t show up at all, and if you want your border color to be anything besides the default (the default in most browsers is #000) then be sure to define a border-color as well.
Another cool aspect of the border-width property is that it can be used to set different widths for each side of your border. If you define the border-width property with four values, each value will correspond to a different side of your border. The first will correspond to the top, the second to the right, the third to the bottom, and the fourth to the left.
If you define the border-width property with two values, each value will correspond to two sides of your border. The first two value will be applied to the top and bottom borders, while the second value will be applied to the right and left borders.
See the example below for a rectangular div with different sized borders on each side:
div{
width: 400px;
height: 250px;
border-width: 2px 8px 10px 15px;
border-color: #463366;
border-style: solid;
}
The div will look like this:
As you can see, each side has a different-border width, with the border getting bigger starting from the top and moving clockwise.