Bordas

Parte da seção Estilização com CSS do Journey de HTML da Coddy. Lição 36 de 76.

No CSS, uma borda é uma linha que envolve um elemento, separando-o de outros elementos e definindo seus limites.

Aqui está a sintaxe básica para usar a propriedade border:

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

border-width: A espessura da borda, que pode ser especificada em pixels (px), ems (em), ou outras unidades CSS válidas. Você também pode usar palavras-chave como thin, medium e thick.

border-style: O estilo da borda, que pode ser um dos seguintes:
- dotted: Uma série de pontos
- dashed: Uma série de traços
- solid: Uma linha sólida
- double: Duas linhas sólidas

border-color: A cor da borda, que pode ser especificada usando cores nomeadas, valores hexadecimais, valores RGB ou valores HSL.

Você também pode usar a notação abreviada para definir todas as três propriedades de borda de uma só vez:

selector {
    border: width style color;
}

Por exemplo:

p {
    border: 2px solid blue;
}

Neste exemplo, todos os elementos <p> (parágrafo) têm uma borda azul sólida com uma largura de 2px.

Desafio

Fácil

Você recebeu um documento HTML com três elementos <div>, cada um representando a programação de um cinema para sexta-feira, sábado e domingo. Sua tarefa é usar a propriedade border para estilizá-los.

Estilize a programação de sexta-feira com uma borda preta, sólida, de 3px.
Estilize a programação de sábado com uma borda azul, tracejada, de 4px.
Estilize a programação de domingo com uma borda verde, pontilhada, de 5px.

Experimente você mesmo

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