Propiedad: Lado Fronteras
Cada lado del borde puede ser manejado separadamente usando estas etiquetas. Uso:
border-top: <border-top-width> || <border-style> || <border-color> ;
border-left: <border-left-width> || <border-style> || <border-color> ;
border-bottom: <border-bottom-width>|| <border-style> || <border-color> ;
border-right: <border-right-width> || <border-style> || <border-color> ;
Definición:
Cada lado del borde puede ser manejado separadamente usando etiquetas. Los bordes laterales toman los valores siguientes.
a)border-top : 5px dotted red - El borde superior se establece usando la etiqueta border-top.
Los valores en orden de ancho, estilo y color del borde superior.
b)border-left : 5pt dashed green - El borde izquierdo se establece usando la etiqueta border-left.
Los valores en orden de ancho, estilo y color del borde superior.
c)border-bottom : 2% groove grey - El borde inferior se establece usando la etiqueta border-bottom.
Los valores en orden de ancho, estilo y color del borde superior.
d)border-right: 5px solid blue - El borde derecho se establece usando la etiqueta border-right.
Los valores en orden de ancho, estilo y color del borde superior.
Ejemplo 1:
<div style=" border-top : 2px dotted red ;">
probando propiedades de borde </div>
Resultado:
probando propiedades de borde
Ejemplo 2:
<div style=" border-left : 2pt dashed green; ">probando propiedades de borde</div>
Resultado:
probando propiedades de borde
Ejemplo 3:
<div style=" border-bottom: 5px ridge brown;">probando propiedades de borde</div>
Resultado:
probando propiedades de borde
Example 4:
<div style=" border-right: 5px groove #733366;">
probando propiedades de borde </div>
Resultado:
probando propiedades de borde
Combinado Todo:
Ejemplo 5:
<div style="
border-top : 2px dotted red ;
border-left : 2pt dashed rgb(100,100,100);
border-bottom: 5px ridge brown;
border-right: 5px groove #733366;
">
probando propiedades de borde</div>
Resultado:
probando propiedades de borde
NOTA: En el ejemplo hemos usado una etiqueta div. Pero puedes usar cualquier etiqueta html estandar para establecer el estilo.
|