border-width
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
pxemrem%vwvh
Keyword
medium(default)thinthick
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.
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.
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.
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.
<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).
You can also learn this topic offline. Click 
.
More Topics to Explore
Scale() Function in CSS: Adjusting Scale of HTML Elements
Chapter 6. Prototyping Interactive Designs with Figma
flex-shrink
App UI Design Elements
