Propriedade borderStyle do estilo

Definição e uso

borderStyle A propriedade define ou retorna o estilo da borda do elemento.

Esta propriedade pode usar de um a quatro valores：

  • Um valor, por exemplo: p {border-style: solid} - Todas as quatro bordas são sólidas
  • Dois valores, por exemplo: p {border-style: solid dotted} - As bordas superior e inferior são linhas sólidas, as bordas esquerda e direita são linhas pontilhadas
  • Três valores, por exemplo: p {border-style: solid dotted double} - A borda superior é linha sólida, as bordas esquerda e direita são linhas pontilhadas, a borda inferior é linha dupla
  • Quatro valores, por exemplo: p {border-style: solid dotted double dashed} - A borda superior é linha sólida, a borda direita é linha pontilhada, a borda inferior é linha dupla, a borda esquerda é linha pontilhada

Veja também：

Tutorial de CSS：Borda do CSS

Manual de Referência do CSS：Propriedade border-style

Manual de Referência do DOM HTML：border 属性

border property

Instance

Example 1

Adds a solid border to the <div> element:

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

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

Example 2

Changes the style of the four borders of the <div> element:

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

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

Example 3

Returns the border style of the <div> element:

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

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

Example 4

Demonstration of all different values:
var listValue = selectTag.options[selectTag.selectedIndex].text;

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

Try it yourself

Syntax

Sets the borderStyle property:Returns the borderStyle property:

.style.borderStyle

Sets the borderStyle property:object .style.borderStyle =
value Value
Description none
Defines a border without border. Default. hidden
Same as "none", but except when resolving border conflicts in table elements. dotted
Defines a dotted border. dashed
Defines a dashed border. solid
Defines a solid border. double
Defines two borders. The width of both borders is the same as the value of border-width. groove Defines a 3D inset border. The effect depends on border-color
Defines a 3D groove border. The effect depends on ridge Defines a 3D inset border. The effect depends on border-color
Defines a 3D ridge border. The effect depends on inset Defines a 3D inset border. The effect depends on border-color
The value of Defines a 3D outset border. The effect depends on the value of border-color.
initial Sets this property to its default value. See initial.
inherit Inherits this property from its parent element. See inherit.

Technical details

Default value: None
Return value: A string that represents the style of the element's border.
CSS version: CSS1

Browser support

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Suporte Suporte Suporte Suporte Suporte