Estilos de borde

Hablaremos del atributo border, los bordes en realidad sirven para que algun elemento se vea mejor, es decir elegante, tambien sirve para dar lugar a ciertos espacios dentro de el o simplemente marcar limites a alguna cosa.



Existen varios tipos de borde.


dotted

---

dashed

---

solid

---

double

---

groove

---

ridge

---

inset

---

outset

---

Hay diferentes formas de aplicar un borde, se puede aplicar en cajas, imagenes y lineas.
Asi que vamos a empezar usando cajas.

La siguiente caja va a tener un ancho, y un estilo de borde que acabamos de ver, podemos escojer el que querramos, asi que yo are mi caja utilizando el estilo de borde: dashed

Para esta caja utilize el estilo de borde dashed

Para hacer esa caja vamos a utilizar el borde que mas nos agrade, pondremos un ancho a la caja y un padding para que el contenido este un poco separado del borde justo asi: Recuerden que esto es un codigo css y lo deven pegar en CSS-CODE

.caja1{
border: 2px dashed #ccc; /* Ancho y estilo de borde, podemos cambiar dashed por el estilo que querramos */
padding: 7px;  /* Separamos un poco el contenido del borde*/
width: 605px; /* Esto es el ancho de la caja */
}

Ya pegado el css de nuestra caja vamos a mostrarla con un div class justo asi: Recuerden que esto es un codigo HTML y lo deven pegar en donde quieran que se vea la caja

<div class="caja1">Aqui pon el contenido que quieras</div>

Y bien eso fue un ejemplo de utilizar bordes en cajas, no olviden que pueden cambiar dashed por el estilo de borde que mas les guste

Haora toca el turno de bordes en imagenes

A la siguiente imagen le pondre el estilo de borde: outset como se muestra a continuacion:



Lo que hizimos para ponerle borde a la imagen ya mostrada pusimos en la etiqueta style un estilo de borde en mi caso puse el outset, tambien aplicamos un padding para separar un poco la imagen del borde justo asi: Recuerden que esto es un codigo HTML y lo deven pegar en donde quieran que se muestre la imagen con borde

<img style="border: 2px outset #ccc; padding: 7px;" src="URL DE IMAGEN"/>

Y por ultimo vamos a hacer lineas con borde

Para hacer lineas con borde utilizaremos el atributo "hr", y en la etiqueta style ponerle el borde, la siguiente linea tiene el estilo de borde: ridge como se muestra a continuacion:

---

Para hacer lineas con borde vamos a utilizar como ya lo habia mencionado en atributo "hr", y en la etiqueta style del mismo pondremos el ancho del borde, el estilo, y el color, justo asi: Recuerden que esto es un codigo HTML y lo deven pegar en donde quieran que se muestre la linea con borde

<hr style="border: 2px ridge #ccc" />

Con esto hemos acabado de entender un poco los estilos de borde y la forma de aplicarlos en lineas, cajas e imagenes.