Borders

Part of the Styling with CSS section of Coddy's HTML journey — lesson 36 of 76.

In CSS, a border is a line that surrounds an element, separating it from other elements and defining its boundaries.

Here's the basic syntax for using the border property:

selector {
    border-width: value;
    border-style: value;
    border-color: value;
}

border-width: The thickness of the border, which can be specified in pixels (px), ems (em), or other valid CSS units. You can also use keywords like thin, medium, and thick.

border-style: The style of the border, which can be one of the following:
- dotted: A series of dots
- dashed: A series of dashes
- solid: A solid line
- double: Two solid lines

border-color: The color of the border, which can be specified using named colors, hexadecimal values, RGB values, or HSL values.

You can also use shorthand notation to set all three border properties at once:

selector {
    border: width style color;
}

For example:

p {
    border: 2px solid blue;
}

In this example, all <p> (paragraph) elements have a solid blue border with a width of 2px.

Challenge

Easy

You are given an HTML document with three <div> elements, each representing a cinema schedule for Friday, Saturday, and Sunday. Your task is to use the border property to style them.

Style the Friday schedule with a 3px solid black border.
Style the Saturday schedule with a 4px dashed blue border.
Style the Sunday schedule with a 5px dotted green border.

Cheat sheet

A border is a line that surrounds an element, separating it from other elements and defining its boundaries.

Border properties:

border-width: Thickness (px, em, or keywords like thin, medium, thick)
border-style: Style (dotted, dashed, solid, double)
border-color: Color (named colors, hex, RGB, HSL)

Individual properties:

selector {
    border-width: value;
    border-style: value;
    border-color: value;
}

Shorthand notation:

selector {
    border: width style color;
}

Example:

p {
    border: 2px solid blue;
}

Try it yourself

<html>
<head>
    <title>Borders</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="friday">
        <h3>Friday</h3>
        <p>7:00 PM - The Inception</p>
    </div>
    <div class="saturday">
        <h3>Saturday</h3>
        <p>8:00 PM - The Matrix</p>
    </div>
    <div class="sunday">
        <h3>Sunday</h3>
        <p>9:00 PM - Interstellar</p>
    </div>
</body>
</html>