Atributo border-inline-width de CSS

Página anterior border-inline-style
Página siguiente border-left

Definición y uso

border-inline-width Configura el ancho del borde del elemento en la dirección de línea.

Note:Para que border-inline-width Para que el atributo sea efectivo, debe configurarse border-inline-style.

border-inline-width El valor del atributo se puede configurar de diferentes maneras:

Si border-inline-width El atributo tiene dos valores:

border-inline-width: 10px 50px;

El ancho del borde en el inicio de la línea es de 10px
El ancho del borde en el final de la línea es de 50px

Si border-inline-width El atributo tiene un valor:

border-inline-width: 10px;

El ancho del borde en el inicio y el final de la línea es de 10px

CSS border-inline-width Atributo y atributo CSS border-bottom-width,border-left-width,border-right-width and border-top-width Very similar, but border-inline-width The property depends on the inline direction.

Note:and related CSS properties writing-mode,text-orientation and direction Defines the inline direction. This affects the start and end positions of a line, as well as border-inline-width The result of the property. For English pages, the inline direction is from left to right, and the block direction is downward.

Instance

Example 1

Set the width of the border for the inline direction:

#example1 {
  border-inline-style: solid;
  border-inline-width: 10px;
}
#example2 {
  border-inline-style: dashed;
  border-inline-width: thin thick;
}

Try It Yourself

Example 2: Combining the writing-mode attribute

The position of the border at the beginning and end of the inline direction is affected by writing-mode Property Affects:

div {
  border-inline-style: solid;
  writing-mode: vertical-rl;
  border-inline-width: 5px;
}

Try It Yourself

Example 3: Combining the direction attribute

The position of the border at the beginning and end of the inline direction is affected by direction Property Affects:

div {
  direction: rtl;
  border-inline-width: 5px 15px;
}

Try It Yourself

CSS Syntax

border-inline-width: medium|thin|thick|length|initial|inherit;

Attribute Value

Value	Description
medium	Specifies a medium border. Default value.
medium	Specifies a thin border.
thin	Specifies a thick border.
length	Allows you to define the thickness of the border. See:Unidades CSS.
initial	Sets this property to its default value. See initial.
inherit	Inherits this property from its parent element. See inherit.

Technical Details

Default Value:	medium
Inheritance:	No
Animation Creation:	Supported. See:Animation-related Properties.
Version:	CSS3
JavaScript Syntax:	object.style.borderInlineWidth="3px 10px"