Puedes tener un bonito borde alrededor de tus imágenes. Hay un montón de CSS fronteras para elegir. Pero no todos son compatibles en todos los navegadores. Por ejemplo, el estilo de borde insertado podría funcionar bien con un borde negro en Firefox pero no Internet Explorer. (La mayoría de los estilos de borde deberían funcionar bien, sin embargo.)

Las propiedades de la frontera que más usarás son éstas:

border-style
border-width
borde-color

Los valores del estilo de borde que puedes usar son estos (también puedes usar "outset", oculto, y ninguno, pero no lo haremos):

dotted
dashed
solid
doble
groove
cresta
insertar

El ancho del borde viene en tres sabores: delgado, medio y grueso. Pero también puede especificar un ancho en píxeles.

El color del borde puede ser algo como "rojo" o un hexadecimal/rgb valor.

Ejercicio
Añade lo siguiente a tu estilo de TextWrap:

CSS for a border image

Aquí, hemos establecido un borde sólido con un ancho de 2 píxeles. También hemos establecido un color.

Guarda y actualiza tu navegador para ver cómo se ve.

Ejercicio
Pruebe los otros estilos de borde mencionados anteriormente. Experimente con el ancho y el color valores para ver cómo funcionan.

Puedes añadir un borde CSS a otros elementos HTML. Por ejemplo, si quieres un borde alrededor de un párrafo de texto, establecer un estilo y añadirlo a la etiqueta P. Así:

CSS and HTML for a border image

(La propiedad de acolchado de arriba le dará un espacio entre la frontera y el texto.)

La propiedad CSS de fondo

Los elementos HTML pueden tener un conjunto de propiedades de fondo. (Por elementos nos referimos a sólo sobre cualquier cosa entre las dos etiquetas del cuerpo). La etiqueta CORPORAL en sí misma puede tomar la Propiedad de fondo. Por ejemplo, si quisieras una página de crema ligera en lugar de blanco simple, puedes usar la propiedad de color de fondo. Como esto:

CSS showing the background-color property

Con este estilo, toda la página tendrá un color diferente. Eso es porque lo aplicamos a la propia etiqueta del cuerpo.

También puedes configurar una clase CSS y colorear un párrafo, con tal vez un ...que lo rodea:

CSS and HTML showing the background-color and border properties

El resultado se vería así:

Browser showing background-color and border properties

Aquí, tenemos un color verde para el fondo del texto. El borde tiene 20 píxeles de relleno entre el borde y el texto. Este tipo de estilo es bueno para cosas como cajas de llamadas, cuando quieres enfatizar un punto en particular. Usted podría incluso tener un elegante cuadro de llamada, si experimentas con las propiedades del borde del CSS:

CSS code for a callout box

El resultado del código anterior sería este:

Browser showing a CSS callout box

Fíjate en cómo hemos usado tres valores CSS con una propiedad:

border-top: 2px #159648 dotted;
borde-fondo: 2px #159648 punteado;

Hemos establecido un ancho de borde, luego un color, luego un estilo de borde. Cada valor es separado por un espacio.

En la próxima lección, aprenderás sobre el CSS y las imágenes de fondo.

| Imágenes de fondo |