Atributo border-inline-start de CSS

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

Definición y uso

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

CSS border-inline-start La propiedad es una abreviatura de la propiedad CSS border-bottom、border-left、border-right y border-top Muy similares, pero border-inline-start La propiedad depende de la dirección en línea.

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

Ejemplo

Ejemplo 1

Establezca el ancho, el color y el estilo del borde en la dirección inline：

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

Pruebe usted mismo

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

La posición del borde en la dirección inline comienza a afectar writing-mode Afectación del atributo：

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

Pruebe usted mismo

Ejemplo 3: Combinación con el atributo direction

La posición del borde en la dirección inline comienza a afectar direction Afectación del atributo：

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

Pruebe usted mismo

Sintaxis de CSS

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

Valor del atributo

Valor	Descripción
border-inline-start-width	Especifique el ancho del borde en la dirección inline del elemento. El valor por defecto es medium.
border-inline-start-style	Especifique el estilo del borde en la dirección inline del elemento. El valor por defecto es none.
border-inline-start-color	Especifique el color del borde en la dirección inline del elemento. El valor por defecto es el color actual del borde.
initial	Establezca este atributo en su valor por defecto. Vea initial。
inherit	Hereda este atributo de su elemento padre. Vea inherit。

Detalles técnicos

Valor por defecto：	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.borderInlineStart="pink dotted 5px"