Más "Try it Yourself" ejemplos a continuación.
Definición y Uso
La propiedad border-style establece el estilo de los cuatro bordes de un elemento. Esta propiedad puede tener de uno a cuatro valores.
Ejemplos:
- border-style:dotted solid double dashed;
- el borde superior está salpicado
- borde derecho es sólida
- borde inferior es el doble
- borde izquierdo es discontinua
- border-style:dotted solid double;
- el borde superior está salpicado
- fronteras derecha e izquierda son sólidos
- borde inferior es el doble
- border-style:dotted solid;
- bordes superior e inferior están salpicadas
- fronteras derecha e izquierda son sólidos
- border-style:dotted;
- los cuatro bordes están salpicadas
| Valor por defecto: | none |
|---|---|
| Heredado: | no |
| animatable: | no. Read about animatable |
| Versión: | CSS1 |
| la sintaxis de JavaScript: | object .style.borderStyle="dotted double" Try it |
Soporte para el navegador
Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con la propiedad.
| Propiedad | |||||
|---|---|---|---|---|---|
| border-style | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
Note: El valor "hidden" no es compatible con Internet Explorer 7 y versiones anteriores. IE8 requiere un DOCTYPE!. IE9 y el apoyo posterior "hidden" .
sintaxis CSS
border-style:none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;Valores de propiedad
| Valor | Descripción | Juegalo |
|---|---|---|
| none | Valor por defecto. No especifica ninguna frontera | Juegalo " |
| hidden | Lo mismo que "none" , excepto en la resolución de conflictos de borde para los elementos de tabla | Juegalo " |
| dotted | Especifica un borde de puntos | Juegalo " |
| dashed | Especifica un borde punteado | Juegalo " |
| solid | Especifica un borde continuo | Juegalo " |
| double | Especifica un borde doble | Juegalo " |
| groove | Especifica un borde acanalado 3D. El efecto depende del valor de border-color | Juegalo " |
| ridge | Especifica un borde estriado 3D. El efecto depende del valor de border-color | Juegalo " |
| inset | Especifica una frontera inserción 3D. El efecto depende del valor de border-color | Juegalo " |
| outset | Especifica un borde principio 3D. El efecto depende del valor de border-color | Juegalo " |
| initial | Establece esta propiedad a su valor por defecto. Lea acerca inicial | Juegalo " |
| inherit | Hereda esta propiedad de su elemento padre. Lee sobre heredar |
Más ejemplos
Ejemplo
Establecer diferentes fronteras a 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;} Inténtalo tú mismo " Páginas relacionadas
CSS tutorial: CSS Frontera
Referencia HTML DOM: borderStyle property