border-inline

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 es una propiedad abreviada para establecer los valores lógicos individuales del borde de bloque en un solo lugar en la hoja de estilos.

css
border-inline: 1px;
border-inline: 2px dotted;
border-inline: medium dashed blue;

border-inline puede ser usada para establecer los valores de uno o más de border-inline-width, border-inline-style, y border-inline-color estableciendo tanto el inicio como el final en la dimensión en línea a la vez. Los bordes físicos a los que se asigna dependen del modo de escritura, la direccionalidad y la orientación del texto del elemento. Corresponden a las propiedades border-top y border-bottom o border-right, and border-left dependiendo de los valores definidos por writing-mode, direction, y text-orientation.

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

Valor inicialApplies toHeredable Valor calculado Animation type

as each of the properties of the shorthand:

border-inline-width: as each of the properties of the shorthand:
- border-inline-start-width: medium
- border-inline-end-width: medium
border-inline-style: as each of the properties of the shorthand:
- border-inline-start-style: none
- border-inline-end-style: none
border-inline-color: as each of the properties of the shorthand:
- border-inline-start-color: currentcolor
- border-inline-end-color: currentcolor

all elements

as each of the properties of the shorthand:

border-inline-width: 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
border-inline-style: as each of the properties of the shorthand:
- border-inline-start-style: como se especifica
- border-inline-end-style: como se especifica
border-inline-color: as each of the properties of the shorthand:
- border-inline-start-color: computed color
- border-inline-end-color: computed color

as each of the properties of the shorthand:

border-inline-width: as each of the properties of the shorthand:
- border-inline-start-width: by computed value type
- border-inline-end-width: by computed value type
border-inline-style: discrete
border-inline-color: as each of the properties of the shorthand:
- border-inline-start-color: by computed value type
- border-inline-end-color: by computed value type

Sintaxis

Valores

El border-inline es especificado con uno o más de los siguientes valores, en cualquier orden:

<'border-width'>

El ancho del borde. Mira border-width.

<'border-style'>

La línea de estilo del borde. Mira border-style.

<'color'>

El color del borde. Mira color.

Sintaxis formal

border-inline =
<'border-block-start'>

<border-block-start> =
<line-width> ||
<line-style> ||
<color>

<line-width> =
<length [0,∞]> |
hairline |
thin |
medium |
thick

<line-style> =
none |
hidden |
dotted |
dashed |
solid |
double |
groove |
ridge |
inset |
outset
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-rl;
  border-inline: 5px dashed blue;
}

Especificaciones

Specification

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

Compatibilidad con 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, border-right, border-bottom, o border-left.
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 31 mar 2026 by MDN contributors.

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

border-inline

In this article

Help improve MDN