Lección 12: Border | Curso CSS

Lección 12: 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:

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?

No te sientas obligado a realizarme una donación, pero cada aportación me ayuda a mantener el sitio en activo para que continúe existiendo y me motiva a continuar creando nuevo contenido.

Comprame un café
Pulsa sobre la imagen
  • 1 café: Se mantiene el dominio durante 4 meses.
  • 2 cafés: Se liquida 1 mes del Servidor Web.
  • 3 cafés: Se paga 1 mes de Newsletter.

Comentarios

{{ comments.length }} comentarios

Nuevo comentario

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

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

Escribe el primer comentario