Bordas

Parte da seção Styling with 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 uma programação de cinema para Friday, Saturday e Sunday. Sua tarefa é usar a propriedade border para estilizá-los.

Estilize a programação de Friday com uma borda 3px solid black.
Estilize a programação de Saturday com uma borda 4px dashed blue.
Estilize a programação de Sunday com uma borda 5px dotted green.

Folha de consulta

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

Propriedades de borda:

border-width: Espessura (px, em, ou palavras-chave como thin, medium, thick)
border-style: Estilo (dotted, dashed, solid, double)
border-color: Cor (cores nomeadas, hex, RGB, HSL)

Propriedades individuais:

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

Notação abreviada (shorthand):

selector {
    border: width style color;
}

Exemplo:

p {
    border: 2px solid blue;
}

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>