Introduction

The shorthand property border-width allows for setting the thickness width of all four sides of an element's border in one go.

border-width: 4px;

Shorthand Syntax

The border-width shorthand syntax can be defined as follows:

We can specify the width for one, two, three, or all 4 sides. If we define fewer than 4 values, the excluded sides will inherit values out of what we've given.

• A single value: Applies across all sides.
• Two values: The top and bottom receive the first, and the second applies to the left and right.
• Three values: The first targets the top, the second covers the left and right, and the third applies to the bottom.
• Four values: Each side, top, right, bottom, and left is addressed individually

border-width: 2px;

Challenge 1

Let’s put your skills to the test with the border-width shorthand CSS property.

• Using the border-width property shorthand, adjust the .box element border width to a 5px to the top border, 15px to the bottom, 20px to the left, and 10px to the right.

Property Values

The property border-width values offer more flexibility by accepting different types of values including lengths and keywords.

Length Values

For the length, we can use the supported CSS units like px, em, or rem to define the border width.

• 1px: A fine, one-pixel line
• 2em: A width relative to the font-size of the element.
• 0: Border not shown.

border-width: 2px;

Challenge 2

Now, with the length values, let's work on applying a consistent border width.

• Apply a uniform solid border of 10 pixels on all sides using the border-width property.

Keywords

Keyword values can sometimes be an option, where:

• thin Defines a narrow and slim border width
• medium Takes the default applied browser border width.
• thick Defines a thick and bold border width

border-width: medium;

Challenge 3

Now, it is your turn to use keyword values to adjust border widths to:

• Set the box element's border to: thin for the top, medium for the sides, and thick for the bottom.

Longhand Syntax

Using independent border width properties, we can define the width of each side individually, if we are looking for more granular control.

• border-top-width: Controls the thickness of the top border.
• border-right-width: Controls the thickness of the right border.
• border-bottom-width: Controls the thickness of the bottom border.
• border-left-width: Controls the thickness of the left border.

For a more precise look, or if you prefer longhand readability you can pair these properties to control each side of an element border width separately.

.element {
  border-top-width: 2px;
  border-right-width: 6px;
  border-bottom-width: 12px;
  border-left-width: 24px;
}

Challenge 4

Now, let's practice setting the border widths by using the longhand syntax to:

• Set respectively all border widths on each side of the .box element: 5px on the top, 10px on the right, 15px on the bottom, and 20px on the left.

Browser Compatibility

The border-width property is widely supported by all major browsers.