Bordes

Parte de la sección Estilos con CSS del Journey de HTML de Coddy. Lección 36 de 76.

En CSS, un borde es una línea que rodea un elemento, lo separa de otros elementos y define sus límites.

Aquí tienes la sintaxis básica para usar la propiedad border:

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

border-width: El grosor del borde, que puede especificarse en píxeles (px), ems (em), u otras unidades CSS válidas. También puedes usar palabras clave como thin, medium, y thick.

border-style: El estilo del borde, que puede ser uno de los siguientes:
- dotted: Una serie de puntos
- dashed: Una serie de guiones
- solid: Una línea sólida
- double: Dos líneas sólidas

border-color: El color del borde, que se puede especificar utilizando colores con nombre, valores hexadecimales, valores RGB o valores HSL.

También puedes usar la notación abreviada para establecer las tres propiedades del borde a la vez:

selector {
    border: width style color;
}

Por ejemplo:

p {
    border: 2px solid blue;
}

En este ejemplo, todos los elementos <p> (párrafo) tienen un borde azul sólido con un ancho de 2px.

Desafío

Fácil

Se te proporciona un documento HTML con tres elementos <div>, cada uno de los cuales representa la cartelera de cine del viernes, sábado y domingo. Tu tarea es usar la propiedad border para darles estilo.

Aplica a la cartelera del viernes un borde 3px solid black.
Aplica a la cartelera del sábado un borde 4px dashed blue.
Aplica a la cartelera del domingo un borde 5px dotted green.

Pruébalo tú mismo

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