Atributo border-inline-style CSS

Página anterior border-inline-start-width
Próxima página border-inline-width

Definição e uso

border-inline-style A propriedade define o estilo da borda do elemento na direção da linha.

border-inline-style O valor da propriedade pode ser configurado de várias maneiras:

Se border-inline-style A propriedade tem dois valores:

div {

O estilo da borda no início da linha é contínuo (solid).
O estilo da borda no fim da linha é pontilhado (dotted).

Se border-inline-style A propriedade tem um valor:

writing-mode

O estilo da borda no início e no fim da linha é pontilhado (dotted).

CSS border-inline-style A propriedade é semelhante a border-bottom-style、border-left-style、border-right-style e border-top-style As propriedades são muito semelhantes, mas border-inline-style A propriedade depende da direção da linha.

Atenção:as propriedades CSS relacionadas border-inline-style: dashed dotted;、text-orientation e Exemplo 3: Combinando o atributo direction Define a direção da linha. Isso afeta a posição de início e fim da linha, bem como border-inline-style O resultado das propriedades. Para páginas em inglês, a direção da linha é de esquerda para direita, e a direção do bloco é para baixo.

实例

Instância

Exemplo

Exemplo 1
  Defina o estilo de borda na direção inline：
direction: rtl;
#example1 {
  border-inline-style: solid;
direction: rtl;

border-inline-style: solid dotted;

#example2 {

border-inline-style: dotted; border-inline-style: dashed dotted; A posição da borda no início e no fim da direção inline é afetada por

direction
  Exemplo 2: Combinando o atributo writing-mode
  writing-mode
direction: rtl;

border-inline-style: solid dotted;

writing-mode: vertical-rl;

border-inline-style: dotted; Exemplo 3: Combinando o atributo direction A posição da borda no início e no fim da direção inline é afetada por

direction
  Atributo afetado：
  div {
direction: rtl;

border-inline-style: solid dotted;

}

Experimente você mesmo

Sintaxe do CSS

border-inline-style: none\|hidden\|dotted\|dashed\|solid\|double\|groove\|ridge\|inset\|outset\|initial\|inherit;	Valor do atributo
none	Valor
Descrição	Valor padrão. Especifique borda nenhuma.
hidden	Igual a none, mas diferente no resolução de conflitos de borda do elemento tabela.
dashed	Especifique a borda pontilhada.
solid	Especifique a borda sólida.
double	Especifique a borda dupla.
groove	Especifique a borda em sulco 3D. O efeito depende do valor de border-color.
ridge	Especifique a borda convexa 3D. O efeito depende do valor de border-color.
inset	Especifique a borda encaixada 3D. O efeito depende do valor de border-color.
outset	Especifique a borda convexa 3D. O efeito depende do valor de border-color.
initial	Defina essa propriedade como seu valor padrão. Veja： initial。
inherit	Herda essa propriedade do elemento pai. Veja： inherit。

Detalhes técnicos

Valor padrão：	none
Herança：	Não
Produção de animação：	Não suportado. Veja em：Atributos relacionados a animação。
Versão：	CSS3
Sintaxe do JavaScript：	object.style.borderInlineStyle="dotted"