H I O X INDIA
CSS Tutorial
 INICIO ||  Scripts  ||  Tutorials  ||  Images  english  Français  中文  Deutsch 

Temas de CSS
Introducción
Tipos de estilo
Propiedades de fondo
Propiedades de texto
Propiedades de fuente
CAJA Propiedades
Frontera Propiedades
Margen de Propiedades
Propiedades Acolchado
Temas Especiales
Pida su Dudas
Reacción



CSS Borde Lateral


Tema

Como dibujar bordes solo en el lado izquierdo y derecho de mi texto?
Dibujar bordes en lados especificados por el usuario.
Cómo dibujar diferentes tipos de bordes en diferentes caras?



Explicación

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.






Una nota
CSS - Cascading Style Sheets se puede utilizar junto con etiquetas html, como se explica en este sitio. Esta sencilla CSS le ayudará a crear mucho más elegante y aseado páginas html. Esto no necesita ningún software adicional o códigos. Todos navegador web son capaces de entregar los códigos CSS.

Nota 2: Si es necesario se puede utilizar en lugar de
etiquetas. div etiqueta de inicio y final en líneas nuevas. span no podrán exceder de la etiqueta de zona.


privacy policy     license    
© 2004-2005 HIOX INDIA - hioxindia.com