CSS Estilo del Borde
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 estiloUso:
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>
Resulta:
probando estilo de borde
Ejemplo 2:
<div style="border-width: 2px;
border-style: dashed; border-color: red; "> probando estilo de borde </div>
Resulta:
probando estilo de borde
Ejemplo 3:
<div style="border-width: 2px;
border-style: solid; border-color: red; "> probando estilo de borde</div>
Resulta:
probando estilo de borde
Ejemplo 4:
<div style="border-width: 4px;
border-style: double; border-color: red; "> probando estilo de borde</div>
Resulta:
probando estilo de borde
Ejemplo 5
<div style="border-width: 4px;
border-style: groove; border-color: red; "> probando estilo de borde</div>
Resulta:
probando estilo de borde
Ejemplo 6: <div style="border-width: 4px;
border-style: ridge; border-color: red; "> probando estilo de borde</div>
Resulta:
probando estilo de borde
Ejemplo 7: <div style="border-width: 4px;
border-style: inset; border-color: red; ">probando estilo de borde</div>
Resulta:
probando estilo de borde
Ejemplo 8: <div style="border-width: 4px;
border-style: outset; border-color: red; "> probando estilo de borde</div>
Resulta:
probando estilo de borde