Propiedad de estilo de borde CSS
Ejemplo
Establezca un estilo para el borde:
div {border-style: dotted;}
Más ejemplos de "Pruébelo usted mismo" a continuación.
Definición y uso
La border-style
propiedad establece el estilo de los cuatro bordes de un elemento. Esta propiedad puede tener de uno a cuatro valores.
Ejemplos:
- estilo de borde: punteado sólido doble punteado;
- el borde superior está punteado
- el borde derecho es sólido
- borde inferior es doble
- el borde izquierdo está discontinuo
- estilo de borde: doble sólido punteado;
- el borde superior está punteado
- los bordes derecho e izquierdo son sólidos
- borde inferior es doble
- estilo de borde: sólido punteado;
- los bordes superior e inferior están punteados
- los bordes derecho e izquierdo son sólidos
- estilo de borde: punteado;
- los cuatro bordes están punteados
Valor por defecto: | ninguna |
---|---|
Heredado: | No |
Animable: | No. Leer sobre animable |
Versión: | CSS1 |
Sintaxis de JavaScript: | objeto .style.borderStyle="doble punteado" |
Compatibilidad con navegador
Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con la propiedad.
Property | |||||
---|---|---|---|---|---|
border-style | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
Nota: el valor "oculto" no es compatible con IE7 y versiones anteriores. IE8 requiere un !DOCTYPE. IE9 y posteriores admiten "oculto".
Sintaxis CSS
border-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;
Valores de propiedad
Value | Description | Play it |
---|---|---|
none | Default value. Specifies no border | |
hidden | The same as "none", except in border conflict resolution for table elements | |
dotted | Specifies a dotted border | |
dashed | Specifies a dashed border | |
solid | Specifies a solid border | |
double | Specifies a double border | |
groove | Specifies a 3D grooved border. The effect depends on the border-color value | |
ridge | Specifies a 3D ridged border. The effect depends on the border-color value | |
inset | Specifies a 3D inset border. The effect depends on the border-color value | |
outset | Specifies a 3D outset border. The effect depends on the border-color value | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
Más ejemplos
Ejemplo
Un borde discontinuo:
div {border-style: dashed;}
Ejemplo
Un borde sólido:
div {border-style: solid;}
Ejemplo
Un borde doble:
div {border-style: double;}
Ejemplo
Un borde de ranura:
div {
border-style: groove;
border-color: coral;
border-width: 7px;
}
Ejemplo
Un borde de cresta:
div {
border-style: ridge;
border-color: coral;
border-width: 7px;
}
Ejemplo
Un borde insertado:
div {
border-style: inset;
border-color: coral;
border-width: 7px;
}
Ejemplo
Un borde inicial:
div {
border-style: outset;
border-color: coral;
border-width: 7px;
}
Ejemplo
Establezca diferentes bordes en cada lado de un elemento:
p.one {border-style: dotted solid dashed double;}
p.two {border-style: dotted solid dashed;}
p.three {border-style: dotted solid;}
p.four {border-style: dotted;}
páginas relacionadas
Tutorial de CSS: Borde CSS
Referencia HTML DOM: propiedad borderStyle