border-inline-width

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since abril de 2021.

Experimental: Esta es una tecnología experimental
Comprueba la Tabla de compabilidad de navegadores cuidadosamente antes de usarla en producción.

La propiedad de CSS border-inline-width define al ancho del borde lógico en línea de un elemento, que se asigna al estilo de borde físico dependiendo del modo de escritura, la direccionalidad y la orientación del texto del elemento. Esto corresponde a las propiedades border-top-width y border-bottom-width, o border-left-width, y border-right-width dependiendo de los valores definidos por writing-mode, direction, y text-orientation.

css
/* <'border-width'> values */
border-inline-width: 5px 10px;
border-inline-width: 5px;
border-inline-width: thick;

El ancho del borde en otra dimensión puede establecerse con border-block-width, que establece border-block-start-width, y border-block-end-width.

Valor inicialApplies toHeredable Valor calculado Animation type

as each of the properties of the shorthand:

border-inline-start-width: medium
border-inline-end-width: medium

all elements

as each of the properties of the shorthand:

border-inline-start-width: absolute length; 0 if the border style is none or hidden
border-inline-end-width: absolute length; 0 if the border style is none or hidden

as each of the properties of the shorthand:

border-inline-start-width: by computed value type
border-inline-end-width: by computed value type

Sintaxis

Valores

<'border-width'>

El ancho del borde. Mira border-width.

Sintaxis formal

border-inline-width =
<'border-top-width'>{1,2}

<border-top-width> =
<line-width>

<line-width> =
<length [0,∞]> |
hairline |
thin |
medium |
thick
Esta sintaxis refleja el estándar más reciente según CSS Borders and Box Decorations Module Level 4. Es posible que no todos los navegadores hayan implementado todas las partes. Consulte Compatibilidad del navegador para obtener información de soporte.

Ejemplo

Contenido HTML

html
<div>
  <p class="exampleText">Example text</p>
</div>

Contenido CSS

css
div {
  background-color: yellow;
  width: 120px;
  height: 120px;
}

.exampleText {
  writing-mode: vertical-lr;
  border: 1px solid blue;
  border-inline-width: 5px 10px;
}

Especificaciones

Specification

CSS Logical Properties and Values Module Level 1
# propdef-border-inline-width

Compatibilidad en navegadores

Enable JavaScript to view this browser compatibility table.

Mira también

Esta propiedad se asigna a una de las propiedades del borde físico:border-top-width, border-right-width, border-bottom-width, y border-left-width
writing-mode, direction, text-orientation

Help improve MDN

Was this page helpful to you?

Yes No

Learn how to contribute

This page was last modified on 20 mar 2026 by MDN contributors.

View this page on GitHub • Report a problem with this content

border-inline-width

In this article

Help improve MDN