Lección 13: Border | Curso CSS

Lección 13: Border

Crea bordes al rededor de un elemento.

.elemento {
    /*
    border: [tamaño] [estilo] [color];
    */
    border: 1px solid black;
}

Borde arriba

.elemento {
    /*
    border-top: [tamaño] [estilo] [color];
    */
    border-top: 1px solid black;
}

Borde derecha

.elemento {
    /*
    border-right: [tamaño] [estilo] [color];
    */
    border-right: 1px solid black;
}

Borde abajo

.elemento {
    /*
    border-bottom: [tamaño] [estilo] [color];
    */
    border-bottom: 1px solid black;
}

Borde izquierda

.elemento {
    /*
    border-left: [tamaño] [estilo] [color];
    */
    border-left: 1px solid black;
}

width

Tamaño del borde.

.elemento {
    border-width: 2rem;
}

style

Estilo del borde.

.elemento {
    /* Más utilizados */
    border-style: solid;
    border-style: none;

    /* Otros */
    border-style: hidden;
    border-style: dotted;
    border-style: dashed;
    border-style: double;
    border-style: groove;
    border-style: ridge;
    border-style: inset;
    border-style: outset;
}

color

Color del borde.

.elemento {
    border-color: orange;
}

radius

Redondea las esquinas.

.elemento {
    border-radius: 4rem;
}

Si el elemento es cuadrado y contiene un border-radius: 50% en adelante, conseguirás un círculo.

image

Usa una imagen personalizada.

.elemento {
    border: 4rem solid;
    border-image: linear-gradient(#f6b73c, #4d9f0c) 1;
}

Más información

Actividad 1

A partir de la siguiente imagen:

* Pulsa en la imagen para descargarla

Usa los borders para atrapar al monstruo y conseguir el siguiente resultado.

Acordeón

Actividad 2

A partir de la imagen de la actividad 1, usa los borders para conseguir el siguiente resultado.

Acordeón

Actividad 3

A partir de la imagen de la actividad 1, usa los borders para conseguir el siguiente resultado.

Acordeón

Actividad 4

A partir de la imagen de la actividad 1, usa los borders para conseguir el siguiente resultado.

Acordeón

Esta obra está bajo una Licencia Creative Commons Atribución-NoComercial-SinDerivadas 4.0 Internacional.

Atribución/Reconocimiento-NoComercial-SinDerivados 4.0 Internacional

¿Me ayudas?

Comprame un café
Pulsa sobre la imagen

No te sientas obligado a realizar una donación, pero cada aportación mantiene el sitio en activo logrando que continúe existiendo y sea accesible para otras personas. Además me motiva a crear nuevo contenido.

Comentarios

{{ comments.length }} comentarios

Nuevo comentario

Nueva replica  {{ formatEllipsisAuthor(replyComment.author) }}

Acepto la política de Protección de Datos.

Escribe el primer comentario