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;
}
Actividad 1
A partir de la siguiente imagen:
Usa los borders para atrapar al monstruo y conseguir el siguiente resultado.
Actividad 2
A partir de la imagen de la actividad 1, usa los borders para conseguir el siguiente resultado.
Actividad 3
A partir de la imagen de la actividad 1, usa los borders para conseguir el siguiente resultado.
Actividad 4
A partir de la imagen de la actividad 1, usa los borders para conseguir el siguiente resultado.
Esta obra está bajo una Licencia Creative Commons Atribución-NoComercial-SinDerivadas 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.
- 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
Nuevo comentario
Nueva replica {{ formatEllipsisAuthor(replyComment.author) }}
Escribe el primer comentario
{{ comments.length }} comentarios