CSS Bordes

Manejando bordes... !

Explicación



Propiedad :

Fronteras
En vez de establecer cada cara de los bordes por separado, se puede hacer todo usando la etiqueta simple. Uso:
border: <border-width> || <border-style> || <border-color> ;

Definición:
Esto establecerá el borde para cualquier objeto.
a)border : 5px dotted green - El borde se establece usando la etiqueta border. Los valores o en orden de ancho, estilo y color del borde.
Esto establece el borde para los cuatro lados.

Ejemplo 1:


<div style=" border : 2px dotted red ;"> probando propiedades de borde </div>

Resulta:


probando propiedades de borde


NOTA: En el ejemplo hemos usado una etiqueta div.
Pero puedes usar cualquier etiqueta estándar html para establecer el estilo.
Borde común en tres lados y un lado de diferente borde:
En algunos casos tendremos bordes comunes para dos o tres caras y un borde diferente para una cara solo. Esto se puede hacer de la siguiente manera:

Ejemplo 2:


<div style="
border : 2px dotted red ;
border-top: 3px dashed green;
">
probando propiedades de borde </div>

Resulta:


probando propiedades de borde


Definición:
Inicialmente establecemos el borde común para todas las caras usando un atributo de borde y luego establecemos/cambiamos el borde superior usando "border-top".