Bordi

Fa parte della sezione Stilizzare con CSS del percorso HTML di Coddy. Lezione 36 di 76.

In CSS, un bordo è una linea che circonda un elemento, separandolo dagli altri elementi e definendone i confini.

Ecco la sintassi di base per usare la proprietà border:

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

border-width: Lo spessore del bordo, che può essere specificato in pixel (px), em (em) o altre unità CSS valide. Puoi anche usare parole chiave come thin, medium e thick.

border-style: Lo stile del bordo, che può essere uno dei seguenti:
- dotted: Una serie di punti
- dashed: Una serie di trattini
- solid: Una linea continua
- double: Due linee continue

border-color: Il colore del bordo, che può essere specificato usando colori con nome, valori esadecimali, valori RGB o valori HSL.

Puoi anche usare la notazione abbreviata per impostare tutte e tre le proprietà del bordo in una volta sola:

selector {
    border: width style color;
}

Ad esempio:

p {
    border: 2px solid blue;
}

In questo esempio, tutti gli elementi <p> (paragrafo) hanno un bordo blu pieno con una larghezza di 2px.

Sfida

Facile

Ti viene fornito un documento HTML con tre elementi <div>, ognuno dei quali rappresenta il programma di un cinema per venerdì, sabato e domenica. Il tuo compito è usare la proprietà border per applicare uno stile.

Applica al programma di venerdì un bordo 3px solid black.
Applica al programma di sabato un bordo 4px dashed blue.
Applica al programma di domenica un bordo 5px dotted green.

Provalo tu

<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>