Atributo border-inline-end CSS

Página anterior border-inline-color
Página siguiente border-inline-end-color

Definición y uso

border-inline-end La propiedad es una abreviatura de las siguientes propiedades:

border-inline-end-width(Ancho del borde final en línea)
border-inline-end-style(Estilo del borde final en línea)
border-inline-end-color(Color del borde final en línea)

CSS border-inline-end La propiedad es una abreviatura de las siguientes propiedades: border-bottom、border-left、border-right y border-top Las propiedades son muy similares, pero border-inline-end La propiedad depende de la dirección en línea.

Atención:Propiedades CSS relacionadas writing-mode、text-orientation y direction Define la dirección en línea. Esto afecta la posición de inicio y final de una línea, así como border-inline-end El resultado del atributo. Para las páginas en inglés, la dirección en línea es de izquierda a derecha, y la dirección de bloque es de arriba a abajo.

Ejemplo

Ejemplo 1

Establecer anchura, color y estilo del borde en el extremo final de la dirección en línea:

div {
  border-inline-end: 10px solid pink;
}

Pruebe usted mismo

Ejemplo 2: Combinación con el atributo writing-mode

La posición del borde en el extremo final de la dirección en línea está influenciada por writing-mode Afectación del atributo:

div {
  writing-mode: vertical-rl;
  border-inline-end: 5px solid blue;
}

Pruebe usted mismo

Ejemplo 3: Combinación con el atributo direction

La posición del borde en el extremo final de la dirección en línea está influenciada por direction Afectación del atributo:

div {
  direction: rtl;
  border-inline-end: 5px solid hotpink;
}

Pruebe usted mismo

Sintaxis de CSS

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

Valor del atributo

Valor	Descripción
border-inline-end-width	Especifica el ancho del borde en el extremo final del elemento en la dirección en línea. El valor predeterminado es "medium".
border-inline-end-style	Especifica el estilo del borde en el extremo final del elemento en la dirección en línea. El valor predeterminado es "none".
border-inline-end-color	Especifica el color del borde en el extremo final del elemento en la dirección en línea. El valor predeterminado es el color del borde actual.

Valor

Descripción

border-inline-end-width

Especifica el ancho del borde en el extremo final del elemento en la dirección en línea.

El valor predeterminado es "medium".

border-inline-end-style

Especifica el estilo del borde en el extremo final del elemento en la dirección en línea.

El valor predeterminado es "none".

border-inline-end-color

Especifica el color del borde en el extremo final del elemento en la dirección en línea.

El valor predeterminado es el color del borde actual.

Detalles técnicos

initial	Establezca este atributo en su valor predeterminado. Ver: initial.
inherit	Hereda este atributo del elemento padre. Ver: inherit.
Valor predeterminado:	medium none currentcolor
Herencia:	No
Creación de animaciones:	Admite. Consulte:Atributos relacionados con la animación.
Versión:	CSS3
Sintaxis de JavaScript:	object.style.borderInlineEnd="pink dotted 5px"