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 Estilo del Borde


Tema

Quiero tener un borde rayado o punteado en html?
Quiero una línea doble alrededor de mi párrafo en html?
¿Cómo dibujar un borde encrestado o estriado usando una hoja de estilo?



Explicación

Propiedad: Frontera estilo

Uso:
border-style: dotted;
border-style: dashed;
border-style: solid;
border-style: double;
border-style: groove;
border-style: ridge;
border-style: inset;
border-style: outset;

Definición:
El estilo del borde puede establecerse usando la etiqueta border-style. Esta toma los siguientes valores:
a)dotted- Creará un borde con lineas punteadas.
b)dashed- Creará un borde con líneas rayadas.
c)solid- Creará un borde con líneas sólidas.
d)double- Creará un borde con lineas dobles.
e)groove- Creará un borde que se verá estriado.
f)ridge- Creará un borde que se verá encrestado.
g)inset- Creará un borde que con la línea biselada.
h)outset- Creará un borde con la línea biselada al lado contrario.

Ejemplo 1:
<div style="border-width: 2px; border-style: dotted; border-color: red; "> probando estilo de borde </div>

Resultado:
probando estilo de borde



Ejemplo 2:
<div style="border-width: 2px; border-style: dashed; border-color: red; "> probando estilo de borde </div>

Resultado:
probando estilo de borde



Ejemplo 3:
<div style="border-width: 2px; border-style: solid; border-color: red; "> probando estilo de borde</div>

Resultado:
probando estilo de borde



Ejemplo 4:
<div style="border-width: 4px; border-style: double; border-color: red; "> probando estilo de borde</div>

Resultado:
probando estilo de borde



Ejemplo 5:
<div style="border-width: 4px; border-style: groove; border-color: red; "> probando estilo de borde</div>

Resultado:
probando estilo de borde



Ejemplo 6:
<div style="border-width: 4px; border-style: ridge; border-color: red; "> probando estilo de borde</div>

Resultado:
probando estilo de borde



Ejemplo 7:
<div style="border-width: 4px; border-style: inset; border-color: red; ">probando estilo de borde</div>

Resultado:
probando estilo de borde



Ejemplo 8:
<div style="border-width: 4px; border-style: outset; border-color: red; "> probando estilo de borde</div>

Resultado:
probando estilo de borde










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