Bordes

Parte de la sección Styling with CSS del Journey de HTML de Coddy — lección 36 de 76.

En CSS, un border es una línea que rodea a un elemento, separándolo de otros elementos y definiendo 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 un horario de cine para Friday, Saturday y Sunday. Tu tarea consiste en utilizar la propiedad border para darles estilo.

Aplica al horario de Friday un borde 3px solid black.
Aplica al horario de Saturday un borde 4px dashed blue.
Aplica al horario de Sunday un borde 5px dotted green.

Hoja de referencia

Un borde es una línea que rodea a un elemento, separándolo de otros elementos y definiendo sus límites.

Propiedades del borde:

border-width: Grosor (px, em, o palabras clave como thin, medium, thick)
border-style: Estilo (dotted, dashed, solid, double)
border-color: Color (colores con nombre, hex, RGB, HSL)

Propiedades individuales:

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

Notación abreviada:

selector {
    border: width style color;
}

Ejemplo:

p {
    border: 2px solid blue;
}

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>