Tanto las imágenes como las cajas donde se aloja el texto pueden estar delimitadas por bordes. Vamos a conocer tres propiedades de CSS relacionadas con estos elementos: con border-color definimos el color del borde; con border-style, el estilo (sólido, doble, punteado...); y con border-width, el grosor. Aquí tienes un ejemplo:
img {
border-color: red;
border-style: solid;
border-width: 4px;
}
¡Ahora te toca a tí!
Retomamos la caja donde se encuentra contenido el texto de esta casilla. Vamos a modificar su borde, siguiendo esta regla:
article.cas {border-color: maroon; border-style: solid; border-width: 3px;}
Solo tienes que sustituir los valores de las propiedades por los que te damos a continuación. Puedes elegir cualquiera de las opciones.
- Color: grey; estilo: solid; grosor: 8px.
- Color: coral; estilo: double; grosor: 10px.
- Color: salmon; estilo: inset; grosor: 12px..
Después activa el botón 'Comprobar' para ver cómo queda la página. Puedes probar con todas las opciones, si lo deseas. Si no te funciona, fíjate bien en cómo has escrito la regla: con los nombres de los colores bien escritos, los espacios en blanco, el punto y coma, para separar las propiedades, etc.