Atributo CSS border-inline

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

Definição e uso

border-inline O atributo é uma abreviação dos seguintes atributos:

Se omitir o valor da cor ou largura, será usado o valor padrão.

do CSS border-inline o atributo é equivalente a border Os atributos são muito semelhantes, mas border-inline A propriedade depende da direção inline.

Nota:as propriedades CSS relacionadas writing-mode,text-orientation e direction Define a direção inline. Isso afeta o início e o fim de uma linha, bem como border-inline O efeito da propriedade. Para páginas em inglês, a direção inline é de esquerda para direita, e a direção de bloco é para baixo.

Exemplo

Exemplo 1

Defina o estilo, cor e largura da borda para diferentes elementos na direção inline:

h1 {
  border-inline: 5px solid red;
}
h2 {
  border-inline: 4px dotted blue;
}
div {
  border-inline: double;
}

Experimente você mesmo

Exemplo 2: Combinando a propriedade writing-mode

A borda no início e no fim da direção inline é afetada por writing-mode Efeito da propriedade:

div {
  writing-mode: vertical-rl;
  border-inline: hotpink dashed 8px;
}

Experimente você mesmo

Sintaxe do CSS

border-inline: border-inline-width border-inline-style border-inline-color |initial|inherit;

Valor do atributo

Valor	Descrição
border-inline-width	Especifique a largura da borda na direção inline. O valor padrão é "medium".
border-inline-style	Especifique o estilo da borda na direção inline. O valor padrão é "none".
border-inline-color	Especifique a cor da borda na direção inline. O valor padrão é a cor do texto.
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:	medium none color
Herança:	não
Produção de animação:	sim, veja propriedades individuais. Leia sobre animável
Versão:	CSS3
Sintaxe do JavaScript:	object.style.borderInline="dashed hotpink 10px"