Chapter 13. CSS: Styling Borders and Drawing Lines

Border (Multiple Properties)

Tag:

You can also set multiple border property values in one line code. The border property is used to set the style, color, and width of borders in one line. If you want to set only one side of the border, you can use the border-top, border-right, border-bottom, or border-left properties.

Using these properties, you can set multiple combinations of properties:

Set only style
Set style and color
Set style and width
Set style, color, and width

Practice

Objective:
Practice various ways to set border properties

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 bg-only class that has already been defined before.

In the code below, we are wrapping each set of object 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(Multiple Properties)</h2>
<h3>All Sides</h3>
<div style="display: flex; flex-wrap: wrap;">
  <div class="bg-only">Original</div>
  <div class="bg-only" style="border: solid">border: solid</div>
  <div class="bg-only" style="border: solid blue">border: solid blue</div>
  <div class="bg-only" style="border: solid 5px">border: solid 5px</div>
  <div class="bg-only" style="border: blue 5px">border: blue 5px</div>
  <div class="bg-only" style="border: solid blue 5px">border: solid blue 5px</div>
</div>

<h3>Specific Side</h3>
<div style="display: flex; flex-wrap: wrap;">
  <div class="bg-only" style="border-top: solid blue 5px">border-top: solid blue 5px</div>
  <div class="bg-only" style="border-right: solid blue 5px">border-right: solid blue 5px</div>
  <div class="bg-only" style="border-bottom: solid blue 5px">border-bottom: solid blue 5px</div>
  <div class="bg-only" style="border-left: solid blue 5px">border-left: solid blue 5px</div>
</div>
<hr>

2. Check the result with a browser

Open chapter13.html with a browser.
You can confirm that there are various ways to set border properties.

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

demo code