Atributo Style borderStyle

Definición y uso

borderStyle Establece o devuelve el estilo del borde del elemento.

Esta propiedad puede adoptar de uno a cuatro valores：

  • Un valor, por ejemplo: p {border-style: solid} - Todas las cuatro barras son sólidas
  • Dos valores, por ejemplo: p {border-style: solid dotted} - Las barras superior e inferior son de línea sólida, las barras laterales son de línea punteada
  • Tres valores, por ejemplo: p {border-style: solid dotted double} - La barra superior es de línea sólida, las barras laterales son de línea punteada, la barra inferior es de línea doble
  • Cuatro valores, por ejemplo: p {border-style: solid dotted double dashed} - La barra superior es de línea sólida, la barra derecha es de línea punteada, la barra inferior es de línea doble, la barra izquierda es de línea punteada

Vea también：

Tutoriales de CSS：Bordes CSS

Manual de referencia de CSS：Atributo border-style

Manual de referencia del DOM HTML：border 属性

border atributo

Ejemplo

Ejemplo 1

Añade un borde sólido al elemento <div>：

document.getElementById("myDiv").style.borderStyle = listValue;

document.getElementById("myDiv").style.borderStyle = "solid";

Ejemplo 2

Cambia el estilo de los cuatro bordes del elemento <div>：

document.getElementById("myDiv").style.borderStyle = listValue;

document.getElementById("myDiv").style.borderStyle = "dotted solid double dashed";

Ejemplo 3

Devuelve el estilo de borde del elemento <div>：

document.getElementById("myDiv").style.borderStyle = listValue;

alert(document.getElementById("myDiv").style.borderStyle);

Ejemplo 4

Demostración de todos los diferentes valores：
var listValue = selectTag.options[selectTag.selectedIndex].text;

document.getElementById("myDiv").style.borderStyle = listValue;

Prueba personalmente

Sintaxis

Establece la propiedad borderStyle：Retorna la propiedad borderStyle：

.style.borderStyle

Establece la propiedad borderStyle：object .style.borderStyle =
value Valor
Descripción none
Define el borde sin bordes. Predeterminado. hidden
Es igual a "none", pero en caso de conflictos de bordes de elementos de tabla, no se aplica. dotted
Define el borde punteado. dashed
Define el borde punteado. solid
Define el borde sólido. double
Define dos bordes. El ancho de los dos bordes es igual al valor de border-width. groove Define el borde 3D inset. El efecto depende de border-color
Define el borde 3D ranurado. El efecto depende de ridge Define el borde 3D inset. El efecto depende de border-color
Define el borde 3D ribeteado. El efecto depende de inset Define el borde 3D inset. El efecto depende de border-color
El valor de Define el borde 3D outset. El efecto depende del valor de border-color.
initial Establece este atributo en su valor predeterminado. Consulte initial。
inherit Hereda este atributo del elemento padre. Consulte inherit。

Detalles técnicos

Valor predeterminado： Ninguno
Valor devuelto： Cadena de caracteres que representa el estilo del borde del elemento.
Versión de CSS： CSS1

Soporte del navegador

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Soporte Soporte Soporte Soporte Soporte