Chapter 13. CSS: Styling Borders and Drawing Lines

Border-width

Tag:

The border-width property is used to set the width (thickness) of borderlines. To show borderlines, you also need to set the border-style properly.

Property Values

You can set property values using length units or keywords.

Length units

px
em
rem
%
vw
vh

Keyword

medium (default)
thin
thick

Multiple Values

Like border-style and border-color, you can set multiple values to set border-width. The rules are the same as the ones for border-style and border-color. When you set only one value, the width is applied to all sides of the borderline. By setting multiple values, you can set different borderline widths for each side of the element.

Two values

The first value is applied to the top and bottom borders.
The second value is applied to the right and left borders.

border-width

Three values

The first value is applied to the top border.
The second value is applied to the right and left borders.
The third value is applied to the bottom border.

border-width

Four values

Using four values, you can specify the width of each side of the borders. The property values are set based on clockwise order starting from the top.

The first value is applied to the top border.
The second value is applied to the right border
The third value is applied to the bottom border.
The fourth value is applied to the left border.

border-width

Practice

Objective:
Practice to set different border width with different number of values

1. Update the body section of the HTML file

Add the code below in the body section of the chapter13.html file. We are using the bg-border class which was defined in the previous practice.

In the code below, we are wrapping each set of item groups using the <div> element with the display and flex-wrap properties to structure the results. We'll explain these properties in detail later. For now, just copy and paste the code.

chapter13.html

<h2>Border Width</h2>
<div class="bg-border">Original</div>
<h3>Keyword</h3>
<div style="display: flex; flex-wrap: wrap;">
  <div class="bg-border" style="border-width: medium;">Medium</div>
  <div class="bg-border" style="border-width: thin;">Thin</div>
  <div class="bg-border" style="border-width: thick;">Thick</div>
</div>

<h3>Length</h3>
<div style="display: flex; flex-wrap: wrap;">
  <div class="bg-border" style="border-width: 5px;">5px</div>
  <div class="bg-border" style="border-width: 1rem;">1rem</div>
  <div class="bg-border" style="border-width: 1em;">1em</div>
  <div class="bg-border" style="border-width: 100%;">100%</div>
  <div class="bg-border" style="border-width: 1vw;">1vw</div>
  <div class="bg-border" style="border-width: 1vh;">1vh</div>
</div>

<h3>Multiple Values</h3>
<div style="display: flex; flex-wrap: wrap;">
  <div class="bg-border" style="border-width: thin thick;"><b>2 Values</b>: thin thick</div>
  <div class="bg-border" style="border-width: thin medium thick;"><b>3 Values</b>: thin medium thick</div>
  <div class="bg-border" style="border-width: 1px 5px 10px 15px;"><b>4 Values</b>: 1px 5px 10px 15px</div>
</div>
<hr>

2. Check the result with a browser

Open chapter13.html with a browser.
You can see how different border widths are set with multiple property values.

You can also check the sample result here (Demo Site ).

demo code

The border-width property is used to set the width (thickness) of borderlines. To show borderlines, you also need to set the border-style properly.

Property Values

You can set property values using length units or keywords.

Length units

px
em
rem
%
vw
vh

Keyword

medium (default)
thin
thick

Multiple Values

Two values

The first value is applied to the top and bottom borders.
The second value is applied to the right and left borders.

border-width

Three values

The first value is applied to the top border.
The second value is applied to the right and left borders.
The third value is applied to the bottom border.

border-width

Four values

Using four values, you can specify the width of each side of the borders. The property values are set based on clockwise order starting from the top.

The first value is applied to the top border.
The second value is applied to the right border
The third value is applied to the bottom border.
The fourth value is applied to the left border.

border-width

Practice

Objective:
Practice to set different border width with different number of values

1. Update the body section of the HTML file

Add the code below in the body section of the chapter13.html file. We are using the bg-border class which was defined in the previous practice.

chapter13.html

<h2>Border Width</h2>
<div class="bg-border">Original</div>
<h3>Keyword</h3>
<div style="display: flex; flex-wrap: wrap;">
  <div class="bg-border" style="border-width: medium;">Medium</div>
  <div class="bg-border" style="border-width: thin;">Thin</div>
  <div class="bg-border" style="border-width: thick;">Thick</div>
</div>

<h3>Length</h3>
<div style="display: flex; flex-wrap: wrap;">
  <div class="bg-border" style="border-width: 5px;">5px</div>
  <div class="bg-border" style="border-width: 1rem;">1rem</div>
  <div class="bg-border" style="border-width: 1em;">1em</div>
  <div class="bg-border" style="border-width: 100%;">100%</div>
  <div class="bg-border" style="border-width: 1vw;">1vw</div>
  <div class="bg-border" style="border-width: 1vh;">1vh</div>
</div>

<h3>Multiple Values</h3>
<div style="display: flex; flex-wrap: wrap;">
  <div class="bg-border" style="border-width: thin thick;"><b>2 Values</b>: thin thick</div>
  <div class="bg-border" style="border-width: thin medium thick;"><b>3 Values</b>: thin medium thick</div>
  <div class="bg-border" style="border-width: 1px 5px 10px 15px;"><b>4 Values</b>: 1px 5px 10px 15px</div>
</div>
<hr>