1. Introduction

This tutorial aims to guide you through the process of styling borders and outlines of HTML elements using CSS. By the end of this tutorial, you will be familiar with various border styles, widths, and colors, and you will also learn how to apply outlines to HTML elements.

What you will learn:
- How to style borders
- How to style outlines

Prerequisites:
- Basic understanding of HTML and CSS

2. Step-by-Step Guide

Styling Borders

You can style borders using the CSS properties: border-style, border-width, and border-color. The border-style property has several values like solid, dashed, dotted, double, etc.

Example:

<div class="example">This is a div with a border.</div>

.example {
  border-style: solid;
  border-width: 5px;
  border-color: red;
}

In the example above, we've given the div a solid, 5-pixel wide, red border.

Styling Outlines

Outlines are similar to borders but they do not take up space, they are drawn above the content. You can style outlines using the CSS properties: outline-style, outline-width, and outline-color.

Example:

<div class="example">This is a div with an outline.</div>

.example {
  outline-style: dotted;
  outline-width: 3px;
  outline-color: blue;
}

In the example above, we've given the div a dotted, 3-pixel wide, blue outline.

3. Code Examples

Example 1: Styling Borders

<div class="borderExample">This div has a styled border.</div>

.borderExample {
  border-style: dashed;
  border-width: 2px;
  border-color: green;
}

In the code above, we have styled the border of the div to be dashed, 2 pixels wide, and green.

Example 2: Styling Outlines

<div class="outlineExample">This div has a styled outline.</div>

.outlineExample {
  outline-style: double;
  outline-width: 4px;
  outline-color: purple;
}

In this code, we have styled the outline of the div to be double, 4 pixels wide, and purple.

4. Summary

In this tutorial, we learned how to style borders and outlines of HTML elements using CSS. The next steps would be to explore more complex border and outline styles, and learn how to use the border-radius property for rounded borders.

Additional resources:
- MDN Web Docs - border
- MDN Web Docs - outline

5. Practice Exercises

Exercise 1: Style a div with a dotted, 5 pixel wide, orange border.

Solution:

<div class="exercise1">This is a div for exercise 1.</div>

.exercise1 {
  border-style: dotted;
  border-width: 5px;
  border-color: orange;
}

Exercise 2: Style a div with a solid, 7 pixel wide, black outline.

Solution:

<div class="exercise2">This is a div for exercise 2.</div>

.exercise2 {
  outline-style: solid;
  outline-width: 7px;
  outline-color: black;
}

Exercise 3: Style a div with a double, 10 pixel wide, cyan border and a dashed, 3 pixel wide, magenta outline.

Solution:

<div class="exercise3">This is a div for exercise 3.</div>

.exercise3 {
  border-style: double;
  border-width: 10px;
  border-color: cyan;
  outline-style: dashed;
  outline-width: 3px;
  outline-color: magenta;
}

For more practice, try styling borders and outlines of different HTML elements, like paragraphs, headings, and lists.